Как прижать футер (flexbox) ?

1. Чтобы прижать футер к низу страницы, даже без наличия основного контента страницы, можно использовать flexbox. Для этого предварительно задаем для body и html { min-height: 100vh }.

2. Затем обертке всей вёрстки - wrapper`у, задаем также высоту { min-height: 100vh; display: flex; flex-direction: column; }. Теперь каркас сайта имеет вертикальное направление (column).

3. Создаем три дочерних элемента для wrapper`а: header, main, footer.

4. После всех манипуляций задаем элументу main { flex-grow: 1 }, которое позволит занимаеть ему всё свободное место родителя - т.е. wrapper`a, так как остальные дочерние flex-элементы header и footer по-умолчанию имеют значение flex-grow: 0 и занимают место только под контент (не занимая свободное место родителя).

5. CSS-свойство flex-grow определяет как много свободного пространства во flex-контейнере должно быть назначено текущему элементу (flex grow factor — «коэффициент увеличения flex»).

Простой пример страницы на codepen