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

Вопрос старый как мир и решений много, среди них:

1. Выбить из потока подвал с помощью абсолютного или фиксированного позиционирования.

2. Задать общему контейнеру min-height: 100vh и контейнеру, который находится между подвалом и шапкой сайта задать flex-grow больше, чем у соседей. Родительский контейнер при этом должен быть флексовым, да.

3. Или рассчитывать на calc() в режиме реального времени, если точно известны размеры шапки и подвала. Хотя бы шапки, если подвал должен начинаться сразу под нижней гранью вьюпорта.

4. И т.д.

Оптимального подхода при низкой базе знаний нет, т.к. тот же флекс без дополнительных свойств может привести к «сплющиванию» элементов.

Футер или "подвал" сайта прижимают к низу страницы с помощью правил каскадных стилей CSS. Но сейчас вся верстка идет в стандарте HTML5, а там предусмотрен функциональный тег <footer>. Так что задачу можно решить, обернув "подвал" в специальный тег и встроив его в верстку.

Лепим футер к низу на 0px, а перед ним подставляем нужной высоты блок, чтобы прокручивался до конца контент...

<div class="otstup"></div>

<div class="lepim"></div>

.otstup{padding-bottom: 50px;float:center;width:100%;height:50px;background:none;}

.lepim{position: fixed; bottom: 0; float:center;width:100%;height:50px;}