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

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

Используя flexbox

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

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

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

</div>

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

Как видите, все довольно просто! Единственный минус — свойство flexbox не будет поддерживаться на старых браузерах.

* {
  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;
}

* {

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);
}

.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.

Кнопка «Вверх» с плавной прокруткой позволяет пользователям быстро возвратиться к началу сайта, читайте наш рецепт