Как с помощью 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;}
Удачи!