Как прижать футер к низу страницы?

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

Во-первых, не только экраны планшетов и смартфонов допускают перемещение физического экрана по виртуальному. Физическое окно видимости - меньше виртуального окна экрана, по которому можно перемещать физическое. Во-вторых, если, как прижать футер к низу страницы (CSS правила) более-менее понятно, то как быть с изменениями размера окна самого браузера?

Абсолютное и относительное позиционирование

Решение контролировать все координаты и размеры не всегда является лучшим, особенно при отображении непрерывного контента. Решение поставить всё на поток (вариант строчных элементов, а не абсолютных блоков), когда каждый следующий элемент размещается вслед за предыдущим и потому нет ни разрывов, ни проблем с отображением футера: он всегда в конце документа, но не всегда «прилеплен» к нижней границе окна браузера.

Конец потока - это не подвал страницы. Футер может быть внизу, но прижать его к нижней границе окна браузера, CSS «не позволит». При этом всегда есть два варианта движения нижней границы окна браузера: вверх и вниз - после того, как страница загрузилась в браузер. Именно это является проблемой.

В большинстве случаев футер с CSS правилом «bottom» при следующих остальных правилах размещения страницы, шапки, контента и футера может обеспечить желаемое решение.

Но это решение будет простым. Оно не будет учитывать множество ситуаций.

Традиционная позиция интернет-стиля программирования «НЕ понял, НЕ сделал» требует от разработчика четкой структуры страницы, никаких расчетов в процессе работы и решение прижать футер к низу страницы можно оставить таким.

Классическое решение проблемы футера

Самый простой вариант решения проблемы с футером, да и вообще с «сайтопроизводством», - использование CMS (систем управления сайтами). Нет проблем, как прижать футер к низу страницы, wordpress, drupal, magenta, 1c-bitrix и другие CMS «знают» и «делают» сами.

В большинстве случаев разработчик так и делает. Используя какую-либо систему управления, программист превращается в контент-менеджера и просто заполняет шаблоны, управляет размещением информации, настраивает связи.

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

Интернет-решение проблемы футера

Все узкие места в программировании современных интересных сайтов в обязательном порядке становятся предметом дискуссий и вариантов решения в интернет-среде. В контексте законченного решения по странице, как прижать футер к низу страницы, 4 способа можно найти гарантированно и, только (!) по одним только правилам CSS.

Верстальщики по какой-то необоснованной и необъяснимой причине решили, что проблема футера и общая композиция страницы - исключительно их прерогатива.

Динамика стандартов HTML5 и CSS3 свидетельствует, что синтаксис и семантика гипертекста развивается. Появляются новые идеи и обновляются старые. Это хорошо, но сайт - это не HTML5/CSS3 и даже не разработчик вкупе с заказчиком. Это решение реальной задачи в реальном интернет-пространстве и области применения (услуги, товары, идеи).

Окно браузера как классика жанра

Переход от текста к графике за тридцать лет сделал фундаментальным понятие окна для любой операционной системы. И Windows, и Apple, и дружное семейство юниксоидов все апеллируют к оконному интерфейсу.

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

Чего проще, ведь браузер понимает, когда в его нижнюю строку (строка состояния) помещается информация:

Это не решение прижать футер к низу страницы и это не футер, но на этом примере понятно, что суть футера - уточнить окно браузера желаемым оформлением.

Однако данное обстоятельство не имеет отношения к подвалу страницы, а всего лишь особенность работы браузера. Строка состояния - это не футер.

Динамичное решение при помощи JavaScript

После загрузки страницы браузер может отработать запуск скрипта JavaScript, который уточнит положение элементов страницы в соответствии с текущим размером окна браузера. Естественно, это решение абсолютно точно разместит футер в нужном месте.

В данном примере устанавливается реакция на событие onload функцией GoPage(), которая определяет текущие координаты дива scLogo и позиционирует его в нужном месте. На событие изменения размера окна браузера устанавливается реакция функцией scfChange.

Здесь выполняется перерасчет координат нужного элемента в соответствии с изменением размера окна браузера. Проблема, как прижать футер к низу страницы, решается однозначно.

Можно выполнить привязку нужного элемента по отношению к любой границе окна. JavaScript работает быстро, и посетитель не будет замечать, как именно было выполнено позиционирование элементов: правилами CSS или алгоритмом на JavaScript.

Результат данного кода при изменении размеров окна браузера:

Здесь элемент с надписью Google будет точно помещен в нужном месте при любом изменении окна браузера, а вот элемент с надписью isV будет правильно отображен только при увеличении окна браузера вниз и правильном положении правого ползунка.

Оптимальное решение по позиционированию элементов

Эпоха статичных страниц уже давно ушла в историю. Применение технологии AJAX, когда элементы страницы наполняются нужной информацией в зависимости от действий посетителя, - это настоящее. Идея, когда страница формируется на лету, - будущее.

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

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

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