2 способа прижать футер к нижней части страницы

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