Прилипающий футер к низу страницы
В этой небольшой статье, рассмотрим как сделать футер который будет прилипать к низу страницы.
Зачем это делать? В в футере находится второстепенная информация, которая не должна привлекать много внимания пользователей. А при не большом количестве контента на странице футер взлетает вверх, располагаясь чуть ли не центре экрана. Выглядит это, согласитесь, не очень красиво.
Для того чтобы прибить футер к низу страницы существует множество способов. Рассмотрим наиболее корректно работающие способы.
Прибиваем футер с помощью position: absolute;
1. HTML:
|
1 2 3 4 5 6 |
<html class="page"> <body class="page__body"> <main>Lorem ipsum.....</main> <footer class="page__footer"></footer> </body> </html> |
2.CSS
Здесь общей обертке с классом page задаем position: relative; и min-height: 100%; чтобы в последствии спозиционировать внутри нее футер абсолютно.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.page { position: relative; min-height: 100%; } .page__body { margin-bottom: 400px; } .page__footer { min-height: 400px; background-color: #181919; position: absolute; bottom: 0; width: 100%; box-sizing: border-box; } |
Внутренней обертке с классом page__body необходимо задать отступ равный высоте футера.
Это довольно хороший способ прибить футер в том случае, если его высота меняться не будет.
Прибиваем футер с помощью Flexbox
1. HTML:
|
1 2 3 4 5 6 |
<html class="page"> <body class="page__body"> <main class="page__content">Lorem ipsum.......</main> <footer class="page__footer"></footer> </body> </html> |
2.CSS
Здесь обертке с классом page__body задаем display: flex; и flex-direction: column; чтобы все элементы внутри нее располагались вертикально.
|
1 2 3 4 5 6 7 |
.page__body { display: flex; flex-direction: column; } .page__content{ flex-grow: 1; } |
Здесь мы задаем контенту flex-grow: 1;(жадность) и тем самым заставляем его занять большую часть места на странице, оставляя футеру лишь минимум необходимого.