У многих начинающих html-верстальщиков во все времена вылезал неприятный «баг», связанный с футером. Суть его в том что этот самый «футер» (aka «подвал» или «нижний колонтитул») не был прижат к нижней части области просмотра браузера.
Решали эту проблему разными костылями с position:fixed, отрицательными значниеми margin-top или применением JS-кода.
В 2021 году с этим стало гораздо проще.
Простой пример, базовой структуры страницы:
<!doctype html>
<html>
<head>
<style>
header {
background-color: lightgrey;
}
footer {
background-color: darkgrey;
}
</style>
</head>
<body>
<header>
<h1>Header.</h1>
</header>
<article>
<h1>Main content.</h1>
</article>
<footer>
<h1>This is Footer.</h1>
</footer>
</body>
<html>
Выглядеть это будет вот так (скриншот сделан в форм-факторе «mobile-first» для удобства, от полноразмерной страницы тут никаких отличий).
С появлением полноценной поддержки браузерами flexbox-верстки, решить проблему прижатия футера к низу страницы при малом количестве контента, стало намного проще.
В CSS-стили добавляем селектор body, задающий минимальную высоту и определяющий body как flex-контейнер с порядком следования дочерних блоков в виде колонки.
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
У селектора footer задаем свойство margin-top со значением auto.
Все очень просто, если не считать того что о нормальном отображении в древних браузерах (типа IE 10, Opera 12) можно забыть. Частично спасут vendor-префиксы -ms-, -o-, -webkit-, но доля этих верси браузеров настолько мала (если вобще есть), что ей можно пренебречь.