sticky

Приклеенный подвал (Sticky Footer) на jQuery или CSS

Бывают такие проекты, когда требуется, чтобы подвал сайта был приклеен к низу окна браузера.

В этой статье мы покажем вам, как это можно сделать на чистом CSS или с помощью jQuery.

Реализация с помощью CSS

Реализация с помощью jQuery

Достаточно проконтролировать, чтобы #footer был последним видимым элементом на странице.

Устанавливаем высоту подвала.

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

Пример

Вот и все. Если вы хотите что-то добавить или поправить, то смело оставляйте комментарии, мы обязательно рассмотрим ваши предложения.


Один комментарий на “Приклеенный подвал (Sticky Footer) на jQuery или CSS

  1. Пример не работает, если контент на странице динамический. Например аякс или ява скрипт фильтр стоит. При загрузке страницы все расчитывается правильно, затем используя фильтр, часть данных удаляется и страница становится маленькая, в итоге футер ползет вверх и получается посередине экрана. Виндов.ресайз или .скролл в этом случае не срабатывает. Было бы удобно еще использовать функцию БОДИ.ресайз, но как это сделать, я ХЗ. Это баг меня преследует повсюду

    Thumb up 0 Thumb down 0

Оставить комментарий