Верхний и нижний колонтитулы CSS нажимают на Zoom-in

Question

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

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

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

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

Спасибо заранее.

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

Answer 1

Это в основном, как это должно работать. The width of a block-level element определяется шириной его содержащего блока. И the width of the initial containing block (то есть содержащий блок элемента html) имеет размеры «окна просмотра» (то есть окна браузера).

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

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

Один из способов исправить это, превратив всю страницу в поплавок, поскольку the width of floating elements сжимается, чтобы соответствовать размерам его содержимого и не ограничивается размерами области просмотра.

Просто добавьте float: left к знаку html или body, чтобы сделать трюк. Тем не менее, я не тестировал это во всех браузерах.

Answer 2

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

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

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

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

#header {min-width:980px;}

Answer 3

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