Есть ли способ сделать ширину DIV для ребенка более широкой, чем родительская DIV, используя CSS?

Ответ 1

Используйте абсолютное позиционирование

.child-div {
    position:absolute;
    left:0;
    right:0;
}

Ответ 2

Вот общее решение, которое сохраняет дочерний элемент в потоке документов:

.child {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);
}

Мы устанавливаем width дочернего элемента, чтобы заполнить всю ширину области просмотра, затем мы заставляем его соответствовать краю экрана, перемещая его к left на расстояние, равное половине области просмотра, минус 50% от ширина родительского элемента.

Демонстрация:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-x: hidden;
}

.parent {
  max-width: 400px;
  margin: 0 auto;
  padding: 1rem;
  position: relative;
  background-color: darkgrey;
}

.child {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);

  height: 100px;
  border: 3px solid red;
  background-color: lightgrey;
}

<div class="parent">
  Pre
  <div class="child">Child</div>
  Post
</div>

Ответ 3

Я долго искал решение этой проблемы. В идеале мы хотим, чтобы ребенок был больше, чем родитель, но не зная заранее ограничений родителя.

И я наконец нашел блестящий общий ответ здесь. Копирование это дословно:

Идея здесь такова: переместите контейнер точно в середину окна браузера с левой стороны: 50%; затем потяните его обратно к левому краю с отрицательным полем -50vw.

.child-div {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

Ответ 4

Основываясь на исходном предложении предложения (задании отрицательных полей), я попытался и предложил аналогичный метод, используя процентные единицы для динамической ширины браузера:

HTML

<div class="grandparent">
    <div class="parent">
        <div class="child">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore neque repellat ipsum natus magni soluta explicabo architecto, molestias laboriosam rerum. Tempore eos labore temporibus alias necessitatibus illum enim, est harum perspiciatis, sit, totam earum corrupti placeat architecto aut minus dignissimos mollitia asperiores sint ea. Libero hic laudantium, ipsam nostrum earum distinctio. Cum expedita, ratione, accusamus dicta similique distinctio est dolore assumenda soluta dolorem quisquam ex possimus aliquid provident quo? Enim tempora quo cupiditate eveniet aperiam.</p>
        </div>
    </div>
</div>

CSS

.child-div{
   margin: 0 -100%;
   padding: 0 -100%;
}

.parent {
    width: 60%;
    background-color: red;
    margin: 0 auto;
    padding: 50px;
    position:relative;
}

.grandparent {
        overflow-x:hidden;
        background-color: blue;
        width: 100%;
        position:relative;
    }

Отрицательные поля позволят контенту выходить из родительского DIV. Поэтому я установил padding: 0 100%; для вывода содержимого обратно в исходные границы Chlid DIV.

Отрицательные поля также увеличивают общую ширину .child-div из окна просмотра браузера, что приводит к горизонтальной прокрутке. Следовательно, нам нужно закрепить ширину выдавливания, применив overflow-x: hidden к бабушке дедушки DIV (которая является родителем родительского Div):

Вот JSfiddle

Я попробовал Нильса Касперсона left: calc(-50vw + 50%); он отлично работал в Chrome и FF (пока не уверен в IE), пока я не узнал, что браузеры Safari не работают должным образом. Надеюсь, они исправили это вскоре, поскольку мне действительно нравится этот простой метод.

Это также может решить вашу проблему, если элемент родительского DIV должен быть position:relative

Два недостатка этого метода обхода:

• Требовать дополнительную разметку (т.е. элемент grandparent (точно так же, как метод вертикального выравнивания таблицы good ol), не так ли?)
• Левая и правая границы дочернего DIV никогда не будут отображаться, просто потому, что они находятся вне окна просмотра браузера.

Пожалуйста, дайте мне знать, есть ли какие-либо проблемы, которые вы найдете с помощью этого метода;). Надеюсь, что это поможет.

Ответ 5

Я использовал это:

HTML

<div class="container">
 <div class="parent">
  <div class="child">
   <div class="inner-container"></div>
  </div>
 </div>
</div>

CSS

.container {
  overflow-x: hidden;
}

.child {
  position: relative;
  width: 200%;
  left: -50%;
}

.inner-container{
  max-width: 1179px;
  margin:0 auto;
}

Ответ 6

Flexbox можно использовать, чтобы сделать ребенка шире, чем его родитель, с помощью трех строк CSS.

Необходимо установить только потомки display, margin-left и width. margin-left зависит от ребенка width. Формула:

margin-left: calc(-.5 * var(--child-width) + 50%);

Переменные CSS можно использовать, чтобы избежать вычисления левого поля вручную.

Демонстрация № 1: Ручной расчет

.parent {
  background-color: aqua;
  height: 50vh;
  margin-left: auto;
  margin-right: auto;
  width: 50vw;
}

.child {
  background-color: pink;
  display: flex;
}

.wide {
  margin-left: calc(-37.5vw + 50%);
  width: 75vw;
}

.full {
  margin-left: calc(-50vw + 50%);
  width: 100vw;
}

<div class="parent">
  <div>
    parent
  </div>
  <div class="child wide">
    75vw
  </div>
  <div class="child full">
    100vw
  </div>
</div>

Ответ 7

вы можете попробовать положение: абсолютное. и дать ширину и высоту, сверху: 'ось y сверху' и слева: 'ось x'

Ответ 8

У меня была аналогичная проблема. Содержимое дочернего элемента должно было оставаться в родительском элементе, в то время как фон должен был расширить ширину окна просмотра.

Я решил эту проблему, создав дочерний элемент position: relative и добавив к нему псевдоэлемент (:before) с помощью position: absolute; top: 0; bottom: 0; width: 4000px; left: -1000px;. Псевдоэлемент остается за фактическим дочерним элементом как псевдоэлемент. Это работает во всех браузерах (даже IE8 + и Safari 6+ - не имеют возможности тестировать более старые версии).

Маленький пример скрипта: http://jsfiddle.net/vccv39j9/

Ответ 9

Добавляя к решению Нильса Касперсона, я также разрешаю ширину вертикальной полосы прокрутки. Я использую 16px в качестве примера, который вычитается из ширины порта просмотра. Это позволит избежать появления полосы горизонтальной полосы прокрутки.

width: calc(100vw - 16px);
left: calc(-1 * (((100vw - 16px) - 100%) / 2));

Ответ 10

Предполагая, что родитель имеет фиксированную ширину, например #page { width: 1000px; } #page { width: 1000px; } и центрируется #page { margin: auto; } #page { margin: auto; }, вы хотите, чтобы дочерний элемент соответствовал ширине области просмотра браузера, которую вы могли бы просто сделать:

#page {
    margin: auto;
    width: 1000px;
}

.fullwidth {
    margin-left: calc(500px - 50vw); /* 500px is half of the parent 1000px */
    width: 100vw;
}

Ответ 11

Чтобы разделить дочерний элемент по ширине с содержимым, попробуйте следующее:

.child{
    position:absolute;
    left:0;
    overflow:visible;
    white-space:nowrap;
}

Ответ 12

.parent {
    margin:0 auto;
    width:700px;
    border:2px solid red;
}
.child {
    position:absolute;
    width:100%;
    border:2px solid blue;
    left:0;
    top:200px;
}

Ответ 13

Я знаю, что это старо, но для тех, кто пришел к этому для ответа, вы сделали бы это так:

Переполнение скрывается над элементом, содержащим родительский элемент, например тело.

Дайте вашему дочернему элементу ширину, значительно более широкую, чем ваша страница, и установите ее абсолютным слева на -100%.

Вот пример:

body {
  overflow:hidden;
}

.parent{
  width: 960px;
  background-color: red;
  margin: 0 auto;
  position: relative;    
}

.child {
  height: 200px;
  position: absolute;
  left: -100%;
  width:9999999px;
}

Также есть скрипт JS: http://jsfiddle.net/v2Tja/288/

Ответ 14

Другие ответы полезны для конкретного случая, когда у вас есть отдаленный предковый div, чтобы расположить левый и правый края div, которые хотите центрировать (например, тело страницы).

Однако часто вы хотите позиционировать элемент X, который является более крупным, чем его родительский центр в этом родителе. Затем вы можете сделать родитель относительно позиционированным и просто установите Xs left и right на подходящее отрицательное число:

<div id="container-div">
    <div id="normal-element>Something</div>
    <div id="wide-element>Some text</div>
</div>

Тогда:

#container-div {
    position: relative;
}
#normal-element {
    margin: 0 auto;
}
#wide-element {
    position: absolute;
    left: -100px;
    right: -100px;
    text-align: center;
}

Результат:

Ответ 15

Тогда решение будет следующим.

HTML

<div class="parent">
    <div class="child"></div>
</div>

CSS

.parent{
        width: 960px;
        margin: auto;
        height: 100vh
    }
    .child{
        position: absolute;
        width: 100vw
    }