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

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

Одной из самых частых трудностей при вёрстке макета сайта, с которыми сталкивается верстальщик, как прижать footer к низу страницы с помощью CSS.


Существует как минимум четыре способа на CSS, однако с появлением CSS-grid, появился ещё один способ, который умещается всего лишь в строку кода. При этом, высота footer значения не имеет, что было важным для прошлых способов.

Как с помощью CSS-grid прижать footer к низу страницы

Для начала, приведу пример html кода:

<html>
<body>

<div class="wr">
<header>шапка сайта</header>
<article>область контента</article>
<footer>подвал сайта</footer>
</div>

</body>
</html>

Тут всё просто и особых объяснений не требуется. Контейнер с классом "wr" (от wrap), содержит три элемента: шапку, область контента и подвал.
Переходим к CSS:

.wr {min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto;}

Контейнеру "wr", мы устанавливаем минимальное отображение высотой в один экран. Отображаем элементы внутри контейнера как сетку. Задаём параметры ширины у элементов внутри контейнера.
Всё, это весь код.

Теперь о кроссбраузерности данного способа. Используя сервис caniuse.com, можно установить, что поддержку CSS-grid имеет 85.49% браузеров, плюс в 2.85% браузеров, поддержка осуществляется при помощи соответствующих префиксов (наши любимые IE и Edge). Вполне нормальное соотношение - можно уже смело пользоваться.

На всякий случай с префиксами под IE и Edge код будет таким:

.wr {min-height: 100vh; display: -ms-grid; display: grid; -ms-grid-rows: auto 1fr auto; grid-template-rows: auto 1fr auto;}

Удачи!


sbird    Уроки    2941

Комментарии отсутствуют

Добавление комментариев доступно только зарегистрированным пользователям