Как прижать футер к низу страницы CSS/HTML

Когда контента на странице немного пригодится этот пример. Создаем блок с классом wrapper, задаем ему необходимые свойства, и оборачиваем в него блок с контентом и футером. Затем из высоты блока с контентом вычетаем высоту футера.

HTML


<div class="wrapper">
  <div class="content">
    <!--Тут основной контент -->
  </div>
  <footer>
    <!--Тут содержимое футера -->
  </footer>
</div>

CSS


.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.content {
  flex: 1 0 auto;
  min-height: calc(100vh - 80px); /* вычетаем высоту футера */
}
footer {
  height: 80px; /* высота футера */
  flex: 0 0 auto;
}