Как указать высоту для main?
Здравствуйте, у меня есть header с высостой в 60px, какие значения высоты должны быть у main что бы веб страница была во всю высоту экрана?
При написании:
.main {
height: 100vh;
}
страница становится немного больше и с боку появляется полоса прокрутки страницы, мне нужно сделать так что бы main занимал всё свободное пространство под header, и при этом не появлялась полоса прокрутки.
Дополнительно:
Если высота header фикcированная 60px, то самое просто можно сделать так:
.main { height: calc(100vh - 60px); } |
.main { height: calc(100vh - 60px); }
А вообще вот один из примеров более гибкого прижатия без фиксированных значений:
snippet
snippet
Хорошо, конечно, что вы уверены, что высота точно 60. Что вас не волнует никакое переполнение шапки ни по какой из причин (увеличенный шрифт у пользователя, отвалился дизайнерский шрифт, использование переводчиков и другие банальные причины)
Если так, то да, calc и вперед.
Разумнее, задать родителю высоту 100vh и грид. В котором первой строке задан min-content, а для main 1fr, т.е. все оставшееся пространство.
grid-template-rows: min-content 1fr
Аналогично можно сделать и флексом и flex-grow для main.
Так получится универсальное решение, не зависящее от высоты шапки.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для указания высоты элемента main в CSS можно использовать различные способы. Один из наиболее распространенных способов - это задание конкретной высоты в пикселях или процентах. Например, если вы хотите установить высоту элемента main в 500 пикселей, вы можете сделать это следующим образом:
main { height: 500px; }
Если вы предпочитаете использовать проценты, то можно указать высоту в процентах от высоты родительского элемента. Например, если хотите, чтобы высота элемента main составляла 50% высоты родительского элемента, то код будет выглядеть следующим образом:
main { height: 50%; }
Также можно использовать другие единицы измерения, такие как em, rem, vh и т. д., в зависимости от ваших потребностей. Например, чтобы установить высоту элемента main в 10 видимых единиц (vh), можно сделать это следующим образом:
main { height: 10vh; }
Важно учитывать, что установка жесткой высоты может привести к проблемам с адаптивным дизайном, поэтому рекомендуется использовать относительные единицы измерения, такие как проценты или видимые единицы. Кроме того, учтите, что высота элемента main может также зависеть от содержимого внутри него, поэтому не забывайте учитывать это при установке высоты.