08.01.2021
51
5 мин.
0
Одна из наиболее распространённых задач веб-разработки прижать футер к низу страницы. Если не предусмотреть такую фичу, то при недостаточном количестве контента на странице футер «прыгает» на середину экрана. В глазах пользователей это выглядит не очень красиво. Самый простой способ решить эту задачу сделать липкий футер на Flexbox.
Ранее разработчики использовали абсолютное позиционирование. К счастью, больше это не требуется.
HTML разметка
Во-первых, в HTML-файле мы создадим заголовок, два абзаца с некоторым количеством текста «рыба» и футер. Например:
<body>
<div class="content">
<h1>Sticky Footer with Flexbox</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<footer>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</footer>
</body>CSS стилизация
Во-вторых, добавим несколько простых базовых стилей. Например:
body {
font-size: 1rem;
}
.content {
padding: 1.5rem;
}
h1,
p {
margin: 1rem 0;
}Футер
В-третьих, теперь напишем CSS стили для футера. Пропишем этот код в общем файле стилей ниже предыдущей стилизации. Например:
footer {
width: 100%;
background: #111;
margin-top: 1.5rem;
}
ul {
padding: 1.25rem;
text-align: center;
}
ul li {
list-style-type: none;
display: inline-block;
margin: 0.25rem 0.75rem;
}
ul a {
color: #fff;
text-decoration: none;
}
ul a:hover {
text-decoration: underline;
}Недостаток контента приводит к тому, что на текущий момент футер располагается по середине экрана. Следующим шагом будет использование Flexbox для его перемещения вниз.
Липкий футер с помощью Flexbox
Читайте также: Как использовать тег mark в HTML для выделения текста.
Далее пропишем CSS-код, необходимый, чтобы создать липкий футер посредством Flexbox. Потребуется всего лишь пять свойств. Этот приём работает с футером любой формы.
В приведённом выше коде мы создали гибкий макет посредством Flexbox, используя свойства display: flex и flex-direction: column. Это позволяет body функционировать как гибкий столбец с классом «content» вверху и footer внизу экрана.
Свойство min-height: 100 vh позволяет body занимать всю высоту текущего экрана.
Кроме того, необходимыми свойствами являются flex и flex-shrink. Свойство flex — это сокращённый вариант. Число его значений бывает разным. При одном браузер воспринимает его как flex-grow, которое устанавливает занимаемое пространство на странице. Так, flex: 1 приводит к тому, что основной контент с классом «content» должен растягиваться на всё свободное пространство.
Для того, чтобы обеспечить равновесие этого эффекта потребуется свойство flex-shrink со значением 0. Оно устанавливает, как будет вести себя разметка при недостаточном месте на экране. При значении 0 это свойство не позволяет элементу сжиматься в любой ситуации. Это позволяет футеру не исчезать (или уменьшаться).
В идеале этот код ниже необходимо добавить перед общими стилями футера выше.
Липкий футер: конечный результат
Стоит отметить, что теперь футер красиво прилегает к низу страницы. Для тестирования можно добавить больше контента. При отсутствии лишнего места и возникновении прокрутки страницы футер ведёт себя как обычно. Он будет не прикрепляться к низу страницы, а просто прокручиваться вверх и вниз вместе с остальным содержимым. С той целью, чтобы реализовать эту задачу, Flexbox является отличным вариантом. Он позволяет обойтись всего лишь несколькими строками и требует минимальных усилий.
Живую демонстрацию того, как выглядит футер теперь можно посмотреть ниже.
See the Pen Untitled by Вячелав Демченко (@upsdjzqs-the-reactor)on CodePen.
