Как расширить дочерний div до 100% ширины экрана, если контейнер div меньше?

Question

Родительский элемент всей страницы представляет собой центрированный div, ограниченный максимальной шириной 960 пикселей. Все остальные элементы на странице являются дочерними элементами этого родительского div. Упрощенная структура выглядит следующим образом:

<div id="parent"> 
    <div id="something"></div> 
    <div id="wide-div></div> 
    <div id="something-else></div> 
</div> 

Хотя родительский DIV не должен выходить за рамки шириной 960px, то ДИВ я назвал «широко ДИВ» здесь должен заполнить всю ширину экрана. Он содержит одно изображение, которое шире, чем 960px, и оно должно устанавливать другой цвет фона для всей ширины экрана.

Я не могу с легкостью извлечь этот div из родительского div, это испортит другие части моего макета, и это сделало бы все это довольно неудобным.

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

Есть ли способ расширить внутренний div до полной ширины экрана в ответном макете?

Answer 1

Вы можете установить ширину на основе VW (ширина окна просмотра). Вы также можете использовать это значение, используя функцию calc, чтобы вычислить левый край для div. Таким образом, вы можете расположить его внутри потока, но все равно торчат с левой и правой стороны отцентрированного прямоугольника с фиксированной шириной.

Поддержка очень хорошая. vw является supported by all major browsers, including IE9+. То же самое касается calc(). Если вам нужно поддерживать IE8 или Opera Mini, вам не повезло с этим методом.

div { 
 
    min-height: 40px; 
 
    box-sizing: border-box; 
 
} 
 
#parent { 
 
    width: 400px; 
 
    border: 1px solid black; 
 
    margin: 0 auto; 
 
} 
 

 
#something { 
 
    border: 2px solid red; 
 
} 
 

 
#wide-div { 
 
    width: 100vw; 
 
    margin-left: calc(-50vw + 50%); 
 
    border: 2px solid green; 
 
}

<div id="parent"> 
 
    <div id="something">Red</div> 
 
    <div id="wide-div">Green</div> 
 
    <div id="something-else">Other content, which is not behind Green as you can see.</div> 
 
</div>

Answer 2

Как правило, отзывчивый элемент, бутстрап или фонд позволяют добавлять элемент «строка». Вы можете поместить «широкий-div» вне элемента с «row», и он должен расширяться, чтобы получить полную ширину.

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

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

Answer 3

вы можете использовать фольксваген. демо http://jsfiddle.net/fsLhm6pk/

.parent { 
    width:200px; 
    height:200px; 
    background:red; 
} 
.child { 
    width:100vw; 
    height: 50px; 
    background:yellow; 
} 

вы правы, это не будет работать с центром DIV, попробуйте это вместо того, чтобы

EDIT http://jsfiddle.net/fsLhm6pk/1/

.parent { 
width:200px; 
height:200px; 
background:red; 
margin:0 auto; 
} 
.child { 
width:100%; 
left:0; right:0; 
position:absolute; 
height: 50px; 
background:yellow; 
} 

Answer 4

После долгих исследований, я нашел это решение: Creating full width (100%) container inside fixed width container. Я думаю, что это лучшее решение, потому что оно не зависит от какого-либо внешнего фактора, а только от div, который вы хотите расширить.

<div class="container" style="width: 750px; margin: 0 auto;"> 
    <div class="row-full"> 
    --- Full width container --- 
    </div> 
</div> 

.row-full{ 
width: 100vw; 
position: relative; 
margin-left: -50vw; 
left: 50%; 
} 

Answer 5

Теперь вы можете сделать это

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

или это

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

Подробнее: https://css-tricks.com/full-width-containers-limited-width-parents/