固定div和流体高度div

时间:2015-06-26 11:21:01

标签: html css

我有一个固定的标题高度和一个副标题,我希望子标题填充整个页面,但是当我这样做时,总会有一个轻微的偏移,导致一旦你调整窗口的高度就会出现一个滚动条:< / p>

&#13;
&#13;
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;
&#13;
&#13;

我用Google搜索并用Google搜索,无法找到答案。

1 个答案:

答案 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>