Прижимаем footer сайта к низу страницы

Часто у начинающих верстальщиков возникает вопрос: как прибить footer к нижней части окна. Этот вопрос актуален, если у вас страница по содержимому значительно меньше размера монитора. Я не буду рассматривать классические способы, их в интернете очень много. Коснусь нескольких способов, которые используют новейшие наработки в CSS и HTML.

Используя flexbox

Для начала, нам нужен элемент-обертка, который будет оборачивать все содержимое html страницы. Пусть это будет блок .wrap.

Расположим внутри него footer.

<div class="wrap">
 <div class="content"></div>
 <div class="footer"></div>
</div>

Зададим следующие стили CSS для созданных элементов:

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.wrap {
  background: pink;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.content {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
}
.footer {
  height: 40px;
  background: cadetblue;  
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

Как видите, все довольно просто!

Пример на codepen:

See the Pen Прижимаем футер к низу страницы flexbox by Alex (@Asmodey) on CodePen.

Фиксированная высота подвала

Если вы знаете фиксированную высоту футера — то можно прибегнуть к возможностям CSS3 и провести вычисления. Допустим, если высота футера — 100px, то нам нужно сделать минимальную высоту блока с содержимым:

.content {
	min-height: calc(100vh - 100px);
}

100vh — это высота размера окна. Единицы измерения vh (viewport height) — это относительные единицы измерения введенные в CSS3, измеряются относительно окна браузера. Также есть vw — viewport width.

Смотрим пример:

See the Pen footer to bottom by Alex (@Asmodey) on CodePen.

Минусы данного подхода — высота футера фиксирована. Это значит — при мобильной версии сайта могут быть проблемы. Но в мобильной версии мы можем отключить вычисления с помощью @media.