Как прижать футер к низу страницы
Для начинающих верстальщиков проблематика не прижатого футера, какое-то время может быть не очевидна. Когда контента хватает на всю высоту экрана, футеру некуда деваться и он естественным образом сам прижимается к низу страницы. Ничего не подозревающий верстальщик сдает заказчику работу, а потом вдруг выясняется, что футер висит посередине страницы. Такое происходит, если контента на странице становится сильно меньше.
Вот так выглядит страница с малым количеством контента в центральной его части и если футер не прижат. Есть ощущение, что он просто повис в воздухе.
Прижать футер при верстке на flex
Для примера создадим HTML страницу с классической структурой:
- общий контейнер container
- шапка header
- контент в центральной части main
- подвал footer
<div class="container">
<header class="header">Header</header>
<main class="content">
<h1 class="title">Липкий футер</h1>
<div class="text">
<p>text text text</p>
</div>
</main>
<footer class="footer">Footer Bottom</footer>
</div>
Пропишем CSS правила:
.container {
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content {
max-width: 800px;
margin: 0 auto;
padding: 40px 20px;
}
.footer {
margin-top: auto;
}
Какие CSS свойства прижмут футер к низу?
Зададим минимальную высоту у контейнера 100vh, при увеличении контента, этот блок будет вытягиваться в длину. Указав блоку footer свойство margin-top: auto, позволим браузеру автоматически вычислять верхний отступ, пока он не дойдет до низа контейнера.
Первый способ
.container {
...
min-height: 100vh;
}
.footer {
margin-top: auto;
}
Второй способ
Блок content является flex-элементом flex-контейнера container и у него есть свойство flex-grow (жадность), которое по умолчанию равно 0. Если контенту задать flex-grow: 1, то он займет все пространство родителя. Тогда футеру будет доступно немного места внизу страницы. Именно это нам и нужно.
.content {
...
min-height: 100vh;
flex-grow: 1;
}
Как прижать футер на Bootstrap
Добавьте специальный класс mt-auto.
<footer class="footer mt-auto"></footer> Необходимостью прижатия футера к низу страницы - это типичная задача, с которой рано или поздно столкнется каждый верстальщик. Эффект повисшего в воздухе футера возникает, когда недостаточно контента в основной части страницы. Однако изучая CSS-свойства по справочникам, а затем сталкиваясь уже с практической версткой, одной теории не хватает. Этот видеокурс "Вёрстка сайта с нуля 2.0", как раз направлен на практическое применение теоретических знаний.
-
Создано 29.07.2020 10:37:06
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.