Как указать высоту для main?

Question

[MrFox235]

Здравствуйте, у меня есть header с высостой в 60px, какие значения высоты должны быть у main что бы веб страница была во всю высоту экрана?
При написании:
.main {
height: 100vh;
}

страница становится немного больше и с боку появляется полоса прокрутки страницы, мне нужно сделать так что бы main занимал всё свободное пространство под header, и при этом не появлялась полоса прокрутки.

Answer 1

[Виталий Першин]

Если высота header фикcированная 60px, то самое просто можно сделать так:

.main {
height: calc(100vh - 60px);
}

А вообще вот один из примеров более гибкого прижатия без фиксированных значений:

Answer 2

[Ankhena]

Хорошо, конечно, что вы уверены, что высота точно 60. Что вас не волнует никакое переполнение шапки ни по какой из причин (увеличенный шрифт у пользователя, отвалился дизайнерский шрифт, использование переводчиков и другие банальные причины)
Если так, то да, calc и вперед.

Разумнее, задать родителю высоту 100vh и грид. В котором первой строке задан min-content, а для main 1fr, т.е. все оставшееся пространство.
grid-template-rows: min-content 1fr
Аналогично можно сделать и флексом и flex-grow для main.

Так получится универсальное решение, не зависящее от высоты шапки.