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

В этом уроке мы с вами поговорим, как сделать "липкий" подвал (футер) на сайте. У него есть и другие названия, например "прилипающий футер", "прижатый футер", "фиксированный футер" или "sticky footer".

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

Сделав "липкий" футер, мы заставим его прижиматься к нижней границы окна браузера и таким образом, футер не будет подниматься вверх, если контента на странице слишком мало. Если же контента на странице много, то "липкий" футер будет себя вести, как обычно.

Смотреть видеоурок

Итак, давайте разберем реальный пример. Вот что мы имеем.

HTML

Это HTML-каркас нашей страницы.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Инвесторы видят перспективу</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="wrapper">
<div class="header">
<p>Это хедер сайта</p>
</div>
<div class="content">
<p>Это область с основным контентом</p>
</div>
<div class="footer">
<p>Это футер сайта</p>
</div>
</div>
</body>
</html>

CSS

И для этой страницы, мы задали некие стили.

.wrapper {
	width: 900px;
	margin: 0 auto;
}
.header p,
.footer p {
	padding: 20px;
}
.header {
	background: #77afda;
}
.content {
	padding: 5px;
}
.content p {
	margin: 10px 0;
}
.footer {
	background: #da9077;
}

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

Способ 1 - Прижать футер с помощью позиционирования

Для этого нам достаточно к тем стилям, которые прописаны выше, добавить еще вот эти.

CSS

html,
body {
	height: 100%;
}
.wrapper {
    position: relative;
    min-height: 100%;
}
.footer {
    height: 56px; /* Задаем фиксированную высоту для футера */
}
.content {
	padding-bottom: 56px; /* Значение должно равняться высоте нашего футера */
}
.footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
}

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

Все бы хорошо, но данный способ имеет один большой недостаток. А именно, нам нужно чтобы футер имел фиксированную высоту. Иначе ничего работать не будет.

Поэтому давайте разберем еще один способ, в нем нам не нужно задавать высоту для футера.

Способ 2 - Прижать футер с помощью метода таблиц

html,
body,
.wrapper {
	height: 100%;
}
.wrapper {
    display: table;
}
.header,
.content,
.footer {
	display: table-row;
}
.header,
.footer {
	height: 1px; /* Метод, делающий наш футер "липким" */
}

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

Способ 3 - Прижать футер с помощью Flexbox (метод будущего)

Также давайте еще познакомимся с одним методом, который сделает наш футер "липким" - это метод с использованием Flexbox.

.wrapper {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}
.content {
	flex: 1;
}

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

А на данный момент, можно смело применять первых 2 способа.

Добавить комментарий

  • 30.08.2018 12:37

    Спасибо тебе за уроки! Благодаря им я устроился разрабом!

  • 16.05.2018 16:57

    Здравствуйте! ___123___Прижать футер на CSS___123___

  • а контент в этих случаях не заползает под футер? Или если добавить сайдбар, возможно либо контент либо контент сайдбара заползет под футер?

  • Как сделать так, чтобы при открытии в браузере консоли футер не уплывал вверх-вниз вместе с ней? Другими словами, как открепить абсолютно позиционированные элементы от браузерной консоли?

  • Способ №3 не заработал у меня в IE11. Решение этой проблемы нашел здесь – http://css-live.ru/articles/uporyadochivanie-bagov-krossbrauzernosti-flexbox.html

  • #primary {
    min-height: calc(100vh – 280px);
    }
    ====================
    header
    id="primary"
    footer
    Александр, а как на счет такого способа

  • 22.04.2015 15:40

    у меня на всех браузерах (opera, chrome, яндекс браузер, ie11) работает 2 способ, а в firefox (37.0.2) не работает

    • Олег, чтобы все заработало, надо задать для элементов

      html,
      body,
      .wrapper {
      height: 100%;
      }

      P.S: в видео я допустил ошибку и задал для wrapper min-height вместо height, отсюда и такие проблемы.