От автора: главная задача прилипающего футера «прилипать» к нижней части окна браузера. Если на странице много контента, то футер должен прилипать строго к нижней границе экрана. Если же контента слишком мало, чтобы пододвинуть футер вниз, опять же требуется его туда опустить.
Отрицательный нижний margin у блока-обертки
Есть блок-обертка, в котором находятся все блоки кроме футера. Данному блоку назначен отрицательный нижний margin, равный высоте футера.
|
1 2 3 4 5 6 7 8 9 |
<body> <div class="wrapper"> content <div class="push"></div> </div> <footer class="footer"></footer> </body> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
html, body { height: 100%; margin: 0; } .wrapper { min-height: 100%; /* Equal to height of footer */ /* But also accounting for potential margin-bottom of last child */ margin-bottom: -50px; } .footer, .push { height: 50px; } |
В данном методе требуется дополнительный элемент в контенте (с классом .push), чтобы отрицательный margin не притянул футер и не перекрыл область текста. Добавить блок push было довольно умным решением, так как у него нет никаких нижних отступов. Если бы и у этого блока был бы свой отступ, его бы пришлось учесть в отрицательном margin’е.
Отрицательный верхний margin на футере
В этой технике не нужен блок push, но тут требуется добавить дополнительный блок-обертку вокруг контента, у которого задан нижний padding. Это сделано для того, чтобы из-за отрицательного margin’а футер не поднимался вверх.
|
1 2 3 4 5 6 7 8 |
<body> <div class="content"> <div class="content-inside"> content </div> </div> <footer class="footer"></footer> </body> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
html, body { height: 100%; margin: 0; } .content { min-height: 100%; } .content-inside { padding: 20px; padding-bottom: 50px; } .footer { height: 50px; margin-top: -50px; } |
Обе техники похожи, так как в них требуется добавить дополнительный HTML элемент.
Функция calc() уменьшающая высоту обертки
Один из способов отказаться от дополнительной разметки это настроить высоту блока-обертки с помощью функции calc(). В таком случае не будет перекрытия, два элемента стыкуются и образуют высоту в 100%.
|
1 2 3 4 5 6 |
<body> <div class="content"> content </div> <footer class="footer"></footer> </body> |
|
1 2 3 4 5 6 |
.content { min-height: calc(100vh - 70px); } .footer { height: 50px; } |
Обратите внимание на 70px в функции calc() и 50px фиксированной высоты футера. Тут мы учитываем, что у футера есть нижний margin в 20px. Из общей высоты необходимо вычесть высоту футера и его нижний внешний отступ. Также мы используем единицы измерения vw, чтобы не задавать 100% высоты body, пока не задано 100% высоты блока обертки.
Flexbox
Основная проблема со всеми описанными выше методами в том, что там нужна фиксированная высота футера. В веб-дизайне фиксированная высота считается признаком плохого тона, контент ведь может меняться. Все должно быть гибким. Фиксированная высота это плохой звоночек. Flexbox позволяет не только не добавлять лишнюю разметку для создания прилипающего футера, но и использовать переменные в значении высоты.
|
1 2 3 4 5 6 |
<body> <div class="content"> content </div> <footer class="footer"></footer> </body> |
|
1 2 3 4 5 6 7 8 9 10 11 |
html { height: 100%; } body { min-height: 100%; display: flex; flex-direction: column; } .content { flex: 1; } |
Можно даже добавить хедер сверху или что-то еще. Flexbox можно использовать двумя способами:
flex: 1 на дочернем элементе для заполнения пространства (контента в нашем случае).
Или margin-top: auto для сдвига дочерних элементов как можно дальше друг от друга (или любом другом направлении margin’а).
Сетка
Сеточный макет еще более новая технология, чем Flexbox (и с гораздо меньшей поддержкой). Сетки также можно легко приспособить под прилипающий футер.
|
1 2 3 4 5 6 |
<body> <div class="content"> content </div> <footer class="footer"></footer> </body> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
html { height: 100%; } body { min-height: 100%; display: grid; grid-template-rows: 1fr auto; } .footer { grid-row-start: 2; grid-row-end: 3; } |
Демо должно работать в Chrome Canary и Firefox Developer Edition. По идее, его можно портировать под старую версию сетки для Edge:
Автор: Chris Coyier
Источник: //css-tricks.com/
Редакция: Команда webformyself.
Комментарии (1)