Question

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

＆＃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;

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

Answer 1

两个高度设置不等于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>

固定div和流体高度div

1 个答案: