Как с помощью CSS Grid прижать footer к низу
Одной из самых частых затруднений при вёрстке макета сайта, с которыми сталкивается начинающий верстальщик, как прижать footer к низу страницы с помощью CSS.
С появлением CSS-Grid, появился способ, который умещается всего лишь в строку кода. При этом, высота footer значения не имеет, что было важным для способов, которые существовали ранее.
Для начала, приведу стандартный пример html кода:
<html>
<body>
<div class="box">
<header>Шапка сайта</header>
<article>Область контента</article>
<footer>Подвал сайта</footer>
</div>
</body>
</html>
Тут всё просто и особых объяснений не требуется. Контейнер с классом "box", содержит три элемента: шапку, область контента и подвал.
Переходим к CSS:
.box {min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto;}
Как это работает?
- Контейнеру "box", мы устанавливаем минимальное отображение высотой в один экран.
- Отображаем элементы внутри контейнера как сетку.
- Задаём параметры ширины у элементов внутри контейнера.
На этом все!
Отправьте нам ТЗ!
Если вы уже приняли решение поработать с нами, то пожалуйста напишите нам используя форму обратной связи или отправьте сообщение на почту, нажав зелёную кнопку.
Менеджер обязательно свяжется с вами.
