Проблема горизонтального переполнения с помощью CSS Sticky Footer

Question

Взгляните на http://www.cssstickyfooter.com/ и измените размер окна вашего браузера до <600px. </p>

Обратите внимание на то, как элементы заголовка и нижнего колонтитула перестают работать, когда содержимое выходит за пределы их ширины.

Есть ли способ предотвратить это, чтобы при горизонтальной прокрутке страницы верхний и нижний колонтитулы не заканчивались?

Answer 1

Эту проблему можно решить, назначив min-width элементам, которые не растягиваются вместе с остальной частью документа.

В DOM-инспекторе на примере сайта попробуйте добавить:

min-width: 960px;

... в верхний и нижний колонтитулы. Задача решена! Я использовал это довольно много раз с хорошими результатами во всех браузерах и устройствах.

Answer 2

То, что вы видите, является побочным эффектом, который делает окно более узким, чем .main, .foot и другие элементы макета со статической шириной. Если они не имеют ширины или имеют меньшую ширину, это прекрасно работает.

Answer 3

Никто на самом деле не использует браузер с шириной менее 600 пикселей.Даже 800x600px умирает с большинством людей, взгляните на результаты этого опроса: http://www.w3schools.com/browsers/browsers_display.asp

Вам следует беспокоиться только о горизонтальном переполнении и других проблемах при меньшей ширине страницы для мобильных устройств, в данном случае это правильный мобильныйБраузер и специальные таблицы стилей помогут решить эту проблему.