При использовании height:100vh;
выдает какую-то лишнюю высоту. даже box-sizing:border-box;
не помогает
.vh100 {
background:red;
height:100vh;
box-sizing:border-box;
}
<div class="vh100"></div>
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуНикаких лишних пикселей.
html,
body {
padding: 0px;
margin: 0px;
}
* {
box-sizing: border-box;
}
.vh100 {
background: red;
height: 100vh;
}
<div class="vh100"></div>
С учетом padding
и margin
:
html,
body {
padding: 5px;
margin: 5px;
}
* {
box-sizing: border-box;
}
.vh100 {
background: red;
height: calc(100vh - 40px);
}
<div class="vh100"></div>
100vh
вам всегда выдадут 100%
высоты viewport
. а какие отступы и поля вы потом будете использовать - ваше дело. Просто, учитывайте их в calc(100vh - XXpx)