Как сделать так, чтобы завернутый div заполнял окно горизонтально?

Question

У меня есть div, содержащий другой центрированный div шириной 960 пикселей.Я добавляю фон к внутреннему элементу div, который должен расширяться до краев окна по горизонтали, по существу выходя за границы его контейнера.Если я применяю большое отрицательное поле и равное количество отступов, это работает с левой стороны, но с правой стороны появляется полоса прокрутки.Кто-нибудь знает, как мне этого добиться, не вызывая полосы прокрутки?

Answer 1

Вы можете расположить внутренний div абсолютно:

CSS

.outerdiv { width: 960px; background: #999; height: 50px; }
.innerdiv { position: absolute; top: 100px; left: 0; background: #ccc; width: 100%; }

HTML

<div class="outerdiv">This is in the outer div
 <div class="innerdiv">This is in the inner div</div>
</div>

или еще лучше, переместите div, чтобы иметь тело документа в качестве его родителя.

Answer 2

Похоже, что внешний div установлен на (или наследование) переполнения: авто, а не переполнения: видимый.

Answer 3

Я всегда помещаю свой оверлейный DIV вне оболочки содержимого, чтобы он не ограничивался макетом.

Если вы в штучной упаковке (без каламбура), вы можете добавить этот DIV с помощью JavaScript, поместив его куда угодно в DOM.