我有一个固定的标题高度和一个副标题,我希望子标题填充整个页面,但是当我这样做时,总会有一个轻微的偏移,导致一旦你调整窗口的高度就会出现一个滚动条:< / p>
header {
width: 100%;
height: 55px;
z-index: 10;
background: #263238;
}
.sub-header {
background: #37474F;
height: 95vh
}
&#13;
<header></header>
<div class="sub-header"></div>
&#13;
我用Google搜索并用Google搜索,无法找到答案。
答案 0 :(得分:3)
两个高度设置不等于100%。 95vh
离开了5vh
,但标题设置为55px
,而不是95vh
的子标题,请calc(100vh - 55px)
。
您还需要确保body
没有设置保证金。
body{
margin:0;
}
header {
width: 100%;
height: 55px;
z-index: 10;
background: #263238;
}
.sub-header {
background: #37474F;
height: calc(100vh - 55px)
}
<header></header>
<div class="sub-header"></div>