Растяните Div на ширину браузера, когда внутри многих контейнеров

Я прочитал ответы на Stackoverflow о том, как растянуть div до полной ширины, когда внутри контейнера с фиксированной шириной. Но они действительны только в том случае, если содержимое находится внутри одного фиксированного контейнера, что, если содержимое находится внутри множества тегов div, ширина которых была задана по-разному.

<div>
<div>
<div>
<div>
<div>
<div> Some Content </div>
</div>
</div>
</div>
</div>
</div>

Установка position в absolute и left и right на 0 просто не работает.

1 ответ

вот jsfiddle, который поможет вам http://jsfiddle.net/Fm7M5/

в вашем примере (если я правильно понял вопрос), когда CONTAINER имеет ширину 50%, эта ширина составляет 100% для всех вложенных элементов. поэтому у неклассифицированных divs & CONTAINER-TO-STRETCH есть автоматическая ширина, которая составляет 100% от контейнера.

поэтому вам понадобится дать CONTAINER-TO-STRETCH ширину, большую, чем ширина его контейнера.

в jsfiddle вы можете увидеть следующее (где TEST - класс, присвоенный одному из неклассифицированных div)

.container {
 background-color: red;
}

.container-to-stretch {
 background-color: yellow;
 width: 400%;
}

.test {
 width: 25%;
 background-color: blue;
}

Таким образом, КОНТЕЙНЕР имеет ширину, составляющую 50% от массы тела, TEST имеет ширину, составляющую 25% от 50% тела, а КОНТЕЙНЕР-К-STRETCH имеет ширину, составляющую 400% от 25% от 50% тело.

licensed under cc by-sa 3.0 with attribution.