Как с помощью CSS прижать footer к низу окна браузера

к содержанию ↑

Вступление

Помнится мне, в тот момент, когда я стал переходить с таблиц на верстку дивами, одной из трудностей, с которыми я столкнулся, была следующая — как прижать подвал сайта (footer) в самый низ окна браузера, чтобы страница при этом выглядела вытянутой на всю высоту, вне зависимости от объема текста, а при высоте страницы, большей, чем высота окна браузера (при появлении скролла), футер оставался бы на положенном ему месте.

Если с помощью таблиц сия задача решается лишь за счет указания высоты для таблицы и/или вложенной в нее ячейки, то при использовании CSS в блочной верстке применяется совсем иной подход.

В процессе практики я выделил для себя 5 способов прижимания футера к низу окна браузера с помощью CSS.

HTML-код всех представленных способов имеет следующую структуру (отличие лишь в CSS-коде):

<html>
<body>

<div class="wrapper">

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

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

</div>

</body>
</html>

В CSS-код, приведенный ниже, включены только те свойства, которые минимально необходимы для реализации соответствующего способа. По каждому из них вы можете посмотреть живой пример.

к содержанию ↑

Первый способ

Footer прижимается вниз путем его абсолютного позиционирования и вытягивания высоты родительских блоков (html, body и .wrapper) на 100%. При этом контентному блоку .content нужно указать нижний отступ, который равен или больше высоты подвала, иначе последний закроет часть контента.

CSS-код:

* {
	margin: 0;
	padding: 0;
}
html,
body {
	height: 100%;
}
.wrapper {
	position: relative;
	min-height: 100%;
}
.content {
	padding-bottom: 90px;
}
.footer {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 80px;
}

Живой пример 1-го способа

к содержанию ↑

Второй способ

Footer прижимается вниз за счет вытягивания блока контента и его «родителей» на всю высоту окна браузера и подъема футера вверх через отрицательный отступ (margin-top) для избавления от появляющегося при этом вертикального скролла. В данном случае необходимо обязательно указать высоту подвала, и она должна быть равна величине отступа.

CSS-код:

* {
	margin: 0;
	padding: 0;
}
html,
body,
.wrapper {
	height: 100%;
}
.content {
	box-sizing: border-box;
	min-height: 100%;
	padding-bottom: 90px;
}
.footer {
	height: 80px;
	margin-top: -80px;
}

Благодаря свойству box-sizing: border-box, мы не позволяем блоку с классом .content превысить высоту 100%. То есть в данном случае min-height: 100% + padding-bottom: 90px равняется 100% высоты окна браузера.

Живой пример 2-го способа

к содержанию ↑

Третий способ

Он хорош тем, что, в отличие от остальных способов (кроме 5-го), высота футера значения не имеет.

CSS-код:

* {
	margin: 0;
	padding: 0;
}
html,
body {
	height: 100%;
}
.wrapper {
	display: table;
	height: 100%;
}
.content {
	display: table-row;
	height: 100%;
}

Здесь мы эмулируем поведение таблицы, превратив блок .wrapper в таблицу, а блок .content в строку таблицы (свойства display: table и display: table-row соответственно). Благодаря этому, а также тому, что блоку .content и всем его родительским контейнерам задана высота 100%, контент растягивается на всю высоту, но за минусом высоты футера, которая определяется автоматически — эмуляция таблицы не дает подвалу вылезть за пределы высоты окна браузера.

В результате footer прижат к низу.

Живой пример 3-го способа

к содержанию ↑

Четвертый способ

Данный способ не похож ни на один из предыдущих, и его особенность заключается в использовании CSS-функции calc() и единицы измерения vh, которые поддерживаются только современными браузерами. Здесь необходимо знать точную высоту подвала.

CSS-код:

* {
	margin: 0;
	padding: 0;
}
.content {
	min-height: calc(100vh - 80px);
}

100vh — это высота окна браузера, а 80px — это высота футера. И с помощью функции calc() мы вычитаем вторую величину из первой, тем самым прижимая футер к низу.

Узнать, какие браузеры поддерживают calc() и vh, вы можете на сайте caniuse.com по следующим ссылкам: поддержка функции calc(), поддержка единицы измерения vh.

Живой пример 4-го способа

к содержанию ↑

Пятый способ (самый актуальный)

Это лучший способ из всех представленных, однако работает он только в современных браузерах. Как и в третьем способе, высота футера значения не имеет.

CSS-код:

* {
	margin: 0;
	padding: 0;
}
html,
body {
	height: 100%;
}
.wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.content {
	flex: 1 0 auto;
}
.footer {
	flex: 0 0 auto;
}

Узнать про поддержку браузерами свойства flex можно здесь.

Живой пример 5-го способа

Комментарии (137)
  1. 1
    Николай

    Спасибо автору! Помог 4-й способ.

  2. 2
    Дарья

    Огромное спасибо!!
    Пятый способ — супер!

Ваш комментарий