наверх

Прилипающий футер к низу страницы

В этой небольшой статье, рассмотрим как сделать футер который будет прилипать к низу страницы.

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

Для того чтобы прибить футер к низу страницы существует множество способов. Рассмотрим наиболее корректно работающие способы.

Прибиваем футер с помощью position: absolute;

1. HTML:

2.CSS

Здесь общей обертке с классом page задаем position: relative; и min-height: 100%; чтобы в последствии спозиционировать внутри нее футер абсолютно.

Внутренней обертке с классом page__body необходимо задать отступ равный высоте футера.

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

Прибиваем футер с помощью Flexbox

1. HTML:

2.CSS

Здесь обертке с классом page__body  задаем display: flex; и  flex-direction: column;  чтобы все элементы внутри нее располагались вертикально.

Здесь мы задаем контенту flex-grow: 1;(жадность) и тем самым заставляем его занять большую часть места на странице, оставляя футеру лишь минимум необходимого.

CSS, HTML, Верстка