Разберем проблему с прилипающим футером.
Представим, что у на главной странице вашего сайта подвал внизу и все ок, но вот на странице контактов контента мало и подвал находится не внизу страницы, а посередине, как здесь:

Как-то я делал javascript реализацию подсчета высоты и автоматическую подстройку, но постоянно возникали проблемы с отступами и я решил, что это необходимо сделать на css.
Решать проблему будем с помощью flex grid.
html
Для начала создадим html-код, тут нам понадобиться всего 2 элемента: content и footer. В content будет лежать шапка и контент сайта, отдельно будет футер.
<body>
<div class="content">
<p>I am content</p>
</div>
<div class="footer">
<p>I am footer</p>
</div>
</body>
CSS
body,html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex: 1 0 auto;
}
.footer {
flex-shrink: 0;
}
Здесь в несколько шагов:
- Делаем body, html высоту в 100%, так как при отсутствии контента они не заполняют высоту экрана.
- Для body установим flex и направление column, так как нам нужно, чтобы они выстроились в столбик.
- Для content укажем flex: 1 0 auto, что дословно:
— flex-grow: 1;
— flex-shrink: 0;
— flex-basis: auto - Подвалу мы запрещаем изменять высоту меньше собственной (shrink).
Готово, проверяем:

Таким образом контент, даже при недостатке контента будет выталкивать подвал вниз страницы.
sticky footer