Рассмотрим 2 наиболее часто применяющихся примера.
Для обоих примеров будет общий HTML:
<div class="body">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, praesentium excepturi eos, ipsum maxime provident nulla enim tempora ab distinctio dignissimos dicta accusantium illo amet voluptatem! Accusamus aliquam animi omnis.</p>
</div>
<div class="footer">
<p>©2020 - Copyright</p>
</div>
</div>
И общие правила стилей для внешнего вида:
.body{
max-width: 600px;
margin: 0 auto;
}
.content {
padding: 10px;
box-sizing: border-box;
}
.footer {
padding: 15px 0;
box-sizing: border-box;
background-color: #cdcdcd;
text-align: center;
}
Весь этот код просто для примера, важно, понять логику, чтобы для своей разметки без проблем добавить пару правил и можно было прижать футер к нижней части страницы.
Способ первый – не очень правильный, но часто используемый.
Футер спозиционирован абсолютно и прижат книзу. А для родительского блока задан снизу отступ, равный высоте футера. И поскольку для разных размеров экрана высота футера может быть разно, то высоту футера высчитываем скриптом.
CSS для абсолютного позиционирования футера внизу:
.body {
position: relative;
min-height: 100vh;
box-sizing: border-box;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
Скрипт для вычисления высоты футера и добавления такого же отступа внизу родительского контейнера:
(function addPaddingForFooter() {
var $footerHeight = $('.footer').outerHeight();
$('.body').css({
'padding-bottom': $footerHeight
});
})();
Пример реализации с абсолютным позиционированием футера:
See the Pen Fix Footer to Bootom By Absolute by Denis (@deniscreative) on CodePen.dark
Способ второй – правильный, с использованием flex.
Для родительского блока задаем display: flex;
направление размещения блоков – column
, и здесь есть 2 варианта:
а) для блока .content
, который идет перед .footer
задаем flex-shrink: 0
, для того, чтобы этот блок не сжимался, если высота содержимого страницы будет больше 100vh, а для .footer
задаем margin-top: auto;
.body {
position: relative;
height: 100vh;
display: flex;
flex-direction: column;
}
.content {
flex-shrink: 0;
}
.footer {
margin-top: auto;
}
б) для блока .content
, который идет перед .footer
задаем flex-grow: 1
и flex-shrink: 0
, для того, чтобы этот блок занимал все свободное место и при этом не сжимался., а для футера ничего прописывать не нужно.
.body {
position: relative;
height: 100vh;
display: flex;
flex-direction: column;
}
.content {
flex-grow: 1;
flex-shrink: 0;
}
Пример реализации с использованием flex
:
See the Pen Fix Footer to Bootom with Flex by Denis (@deniscreative) on CodePen.dark