Заголовок CSS и нижний колонтитул ломаются при увеличении

Question

Я только что закончил редизайн этого сайта ( www.imustsolutions.co.za ), и у меня возникла проблема с верхним и нижним колонтитулом, когда пользователь увеличивает (Cntrl + in FF).

Вот проблема: Цвет фона нижнего колонтитула / заголовка не закрашивается, чтобы заполнить остальную часть экрана (по горизонтали), когда пользователь увеличивает масштаб.

Что я делаю не так?

Вот снова сайт: www.imustsolutions.co.za

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

С уважением, M

Answer 1

Проблема в том, что ширина вашего заголовка установлена ​​на 100% (100% от исходного окна браузера), тогда как ваш основной контент установлен на 980px.

Так, когда вы находитесь в полном размереВ режиме 100% будет больше, чем 980px, но при изменении размера или увеличении 100% станет меньше, чем 980px, и ваш заголовок сломается, тогда как основное содержимое будет переполнено вправо, если это будет необходимо.

Установкаmin-width как для верхнего, так и для нижнего колонтитула совпадает со значением ширины (плюс отступы и поля, если таковые имеются) основного содержимого, как правило, достаточно для решения таких проблем.

Что касается вашего сайта,поскольку ваш основной контент настроен на 980 пикселей, вы можете попробовать:

#header {min-width:980px;}

Answer 2

Это в основном, как это должно работать. Ширина элемента уровня блока определяется шириной содержащего его блока.И ширина исходного содержащего блока (то есть содержащего блока элемента html) имеет размеры "окна просмотра" (то есть окна браузера).

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

То же самое происходит и в нижнем колонтитуле самого StackOverflow,например: если вы увеличиваете эту страницу до тех пор, пока не получите горизонтальную полосу прокрутки, а затем прокрутите ее в сторону, вы также увидите, что серый фон тоже обрезан.

Один из способов исправить это - перевернуть всю страницув число с плавающей точкой, поскольку ширина плавающих элементов сокращается до размеров его содержимого и не ограничивается размерами области просмотра.

Простое добавление float: left к *Тег 1017 * или body должен помочь.Я не проверял это во всех браузерах.

Answer 3

Ваш элемент DOM верхнего и нижнего колонтитула должен быть помещен в основной контент.Таким образом, ваш заголовок 100% будет ограничен размером основного контента: 980px