Рассмотрим 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