CSS: Sticky footer howto
05.05.2017

Sticky footer - это прикрепленный к нижней кромке HTML-страницы подвал. В большинстве случаев необходим, т.к. на пустых страницах сайта (например, 404) подвал "летит" вверх, а не позиционируется внизу.

Есть 2 варианта базовой реализации. В обоих вариантах HTML структура будет следующей:

<html>
<body>
<div class="wrapper">
    Это содержимое!
</div>
<footer>
    Это подвал!
</footer>
</body>
</html>

Будет меняться только CSS...

Вариант №1

* { margin: 0; }
html, body { height: 100%; }
.wrapper {
    min-height: 100%;
    margin-bottom: -100px; /* Равно высоте footer */
}
.wrapper:after {
    content: "";
    display: block;
}
footer, .wrapper:after {
    height: 100px;
}

Вариант подходит, если вы знаете четко высоту вашего подвала на сайте. Заметьте, что высоту нужно указать в двух местах.

Вариант №2

* { margin: 0; }
html, body { height: 100%; }
body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}
.wrapper { flex: 1; }

Работает с динамичным контентом. Минус один: если вы поддерживаете старые браузеры (например, Firefix 3.6 или IE 9), то вам придется полностью отказаться от этого варианта.

Успехов!

Теги → css sticky footer howto