Домой / HELP / Как с помощью CSS прижать footer к низу окна браузера

Как с помощью CSS прижать footer к низу окна браузера

Задача прижать footer к низу окна браузера – это одна из самых часто встречаемых задач при верстке сайта.

В общем, ситуация следующая: на странице есть 3 области header, content и footer (верхняя часть страницы, содержимое и нижняя часть).

В процессе практики я выделил для себя 5 способов прижимания футера к низу окна браузера с помощью CSS.

HTML-код всех представленных способов имеет следующую структуру (отличие лишь в CSS-коде):

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

Первый способ
Footer прижимается вниз путем его абсолютного позиционирования и вытягивания высоты родительских блоков (html, body и .wrapper) на 100%. При этом контентному блоку .content нужно указать нижний отступ, который равен или больше высоты подвала, иначе последний закроет часть контента.

Второй способ
Footer прижимается вниз за счет вытягивания блока контента и его «родителей» на всю высоту окна браузера и подъема футера вверх через отрицательный отступ (margin-top) для избавления от появляющегося при этом вертикального скролла. В данном случае необходимо обязательно указать высоту подвала, и она должна быть равна величине отступа.

Третий способ
Он хорош тем, что, в отличие от остальных способов (кроме 5-го), высота футера значения не имеет.

Здесь мы эмулируем поведение таблицы, превратив блок .wrapper в таблицу, а блок .content в строку таблицы (свойства display: table и display: table-row соответственно). Благодаря этому, а также тому, что блоку .content и всем его родительским контейнерам задана высота 100%, контент растягивается на всю высоту, но за минусом высоты футера, которая определяется автоматически — эмуляция таблицы не дает подвалу вылезть за пределы высоты окна браузера. В результате footer прижат к низу.

Четвертый способ
Данный способ не похож ни на один из предыдущих, и его особенность заключается в использовании CSS-функции calc() и единицы измерения vh, которые поддерживаются только современными браузерами. Здесь необходимо знать точную высоту подвала.

100vh — это высота окна браузера, а 80px — это высота футера. И с помощью функции calc() мы вычитаем вторую величину из первой, тем самым прижимая футер к низу.

Узнать, какие браузеры поддерживают calc() и vh, вы можете на сайте caniuse.com по следующим ссылкам: поддержка функции calc(), поддержка единицы измерения vh.

Пятый способ (самый актуальный)
Это лучший способ из всех представленных, однако работает он только в современных браузерах. Как и в третьем способе, высота футера значения не имеет.

Узнать про поддержку браузерами свойства flex можно здесь.

Про Александр

Здравствуйте, меня зовут Александр Мороз. Профессионально занимаюсь созданием сайтов . Выражаюсь на диалектах PHP, SQL, JavaScript, HTML, CSS, XML, jQuery. Иногда и матом в особо сложных случаях :)

Проверьте также

Удобный поиск в админке Opencart 2

В административной части Opencart 2 очень неудобный поиск. Например чтобы найти «Сумка серая АБВГД» надо …

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *