Блог

Есть ли способ создать дочерний DIV-файл внутри родительского контейнера DIV, который шире, чем его родительский. Дочерний DIV-файл должен быть такой же ширины, как окно просмотра браузера.

Смотрите пример ниже:

Дочерний DIV должен оставаться дочерним по отношению к родительскому div. Я знаю, что могу установить произвольные отрицательные поля для дочернего div, чтобы сделать его шире, но я не могу понять, как по существу сделать его шириной 100% браузера.

Я знаю, что могу это сделать:

 .child-div{
    margin-left: -100px;
    margin-right: -100px;
}
  

Но мне нужно, чтобы дочерний файл был такой же ширины, как динамический браузер.

Обновить

Спасибо за ваши ответы, кажется, что самый близкий ответ на данный момент — создать дочерний DIV position: absolute и установить для свойств left и right значение 0.

Следующая проблема, с которой я сталкиваюсь, заключается в том, что родительский DIV имеет position: relative , что означает, что свойства left и right по-прежнему относятся к родительскому div, а не к браузеру, смотрите Пример здесь: jsfiddle.net/v2Tja/2

Я не могу удалить position: relative из родительского, не испортив все остальное.

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

 .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>  

Поддержка браузером vw и calc(), как правило, может рассматриваться как IE9 и новее.

Примечание: Предполагается, что для модели box установлено значение border-box . Без этого border-box вам также пришлось бы вычитать отступы и границы, что привело бы к путанице в этом решении.

Примечание: Рекомендуется скрывать горизонтальное переполнение вашего контейнера прокрутки, поскольку некоторые браузеры могут отображать горизонтальную полосу прокрутки, несмотря на отсутствие переполнения.

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

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

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

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

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

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

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

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.

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

Вот JSfiddle

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

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

Двумя недостатками этого метода обхода являются:

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

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

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>  

Демонстрация # 2: использование переменных CSS

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

.child {
  background-color: pink;
  display: flex;
  margin-left: calc(-.5 * var(--child-width)   50%);
  width: var(--child-width);
}

.wide {
  --child-width: 75vw;
}

.full {
  --child-width: 100vw;
}  

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

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

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;
}
  

Я попробовал некоторые из ваших решений. Этот :

 margin: 0px -100%;
padding: 0 100%;
  

безусловно, лучший, поскольку нам не нужен дополнительный css для меньшего экрана. Я создал codePen, чтобы показать результаты: я использовал родительский div с фоновым изображением и дочерний div с внутренним содержимым.

https://codepen.io/yuyazz/pen/BaoqBBq

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

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

Небольшой пример скрипки: http://jsfiddle.net/vccv39j9 /

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

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

вы можете попробовать position: absolute. и укажите ширину и высоту, сверху: ‘ось y сверху’ и слева: ‘ось x’

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

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

Придайте вашему дочернему элементу ширину, намного превышающую ширину вашей страницы, и расположите его абсолютно слева на -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 /

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

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

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

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

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

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

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

HTML

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

CSS

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