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

Question

[Shandy]

Сделал сетку через grid-area и grid-template-areas, но футер висит посередине, если не заполнить страницу контентом. Не хочется все переписывать, хочу обойтись малой кровью.
https://codepen.io/shandeika/pen/JjRzEBV

Comments

[Ankhena]

Какая высота должна быть у сайта?
- минимально вся высота окна.
=> задаем для body min-height 100vh

Как свободное место должно распределяться по блокам?
- шапка должна занимать столько места, сколько ей нужно, подвал аналогично, а свободное место уходит в контентную часть.
=> переводим это на css
grid-template-rows: min-content 1fr min-content

[Shandy]

Ankhena, работает, но панель навигации теперь занимает пол страницы.

[Ankhena]

Владимир Аршинов, логично, у вас же 4 строки, а я рассказала пример только для 3.

Answer 1

[tyoma_koder]

.content{
min-width: 100vh;
}

Comments

[Shandy]

точно width? :D Если брать ваш код, то ничего не меняется.
Если изменять height, то 100vh явно много, а проценты там не получается использовать почему то :(

[tyoma_koder]

Владимир Аршинов, а, не width а height

.content {
    grid-area: content;
    min-height: 100vh;
}