Ширина: 100% при изменении размера окна (CSS)

Question

Когда я устанавливаю свой верхний и нижний колонтитулы на 100%, я получаю странное поведение в FF4, Safari 5 и Chrome 12 в Mac OS X. Если у меня окно браузера с высоким разрешением и уменьшено, горизонтальные полосы прокрутки появятся дажехотя содержимое должно масштабироваться вместе с окном браузера.

Я видел эту ветку, в которой, похоже, была похожая проблема, хотя казалось, что пользователь никогда не находил решения: Ширина CSS 100% при изменении размера браузера

Переполнение-x не работает для меня, поскольку метки ошибок, которые абсолютно позиционированы, будут вести себя как фиксированные.

DEMO здесь (ошибки при размытии):

http://kassekladde.tixz.dk/kontakt-os/

Заранее спасибо

Answer 1

Проблема вызвана #overlay.Вы установили visibility:hidden.Это скрывает контент, но позволяет ему занимать место на странице.Если вы измените его на display:none, вместо этого он будет скрывать содержимое и занимаемое пространство, останавливая полосы прокрутки в процессе.

#overlay динамически получает ширину / высоту по мере сжатия страницы.Как вы можете видеть ниже, он достиг width:1711px в одной точке, и появились полосы прокрутки:

<div id="overlay" class="overlay" style="width: 1711px; height: 1489px; visibility: hidden; opacity: 0; position: absolute; background: none repeat scroll 0% 0% rgb(0, 0, 0); left: 0px; top: 0px; z-index: 5000;"></div>

Answer 2

После просмотра CSS & html, верхний и нижний колонтитулы находятся в div с классом 'container', который определен как ширина 980 пикселей, поэтому оба будут уменьшаться, пока не достигнут ширины 980 пикселей такое поведение я наблюдаю в браузерах, которые я тестировал в Windows 7 (извините, у меня нет доступа к MacOSX). Вы видите что-то другое или вы пытаетесь уменьшить их до 980 пикселей? Если последнее верно, то вам нужно вытащить их из класса контейнера.