css内容高度100%是滚动页面

Question

我的 html 页面中有一个 header 和 content div。我想在我的内容中设置一个 100% 但不显示滚动条的图像或地图。用页眉和内容调整页面高度。

<div class="head">
      Header
</div>
<div class="content">
     <img class="image" src="http://images.all-free-download.com/images/graphiclarge/daisy_pollen_flower_220533.jpg"/>
</div>

而我的 CSS 是这样的。

html, body {height: 100%}
.head{
  border: 1px solid red;
  height: 100px;
  width: 100%;
}
.content{
  border: 1px solid blue;
height: 100%;
  width: 100%;
}
.image{
  height: 100%;
  width: 100%;
}

Answer 1

100% + 1px 边框大于 100%。

要解决这个问题，请移除边框或使用

box-sizing: border-box

此外，您的.content 的高度为 100%。那是其父级的客户端高度的 100%。这不是剩余高度，也没有考虑其他孩子。因此，.head 被添加到该高度，它们将是总页面高度的 100% + 100px + 4px（用于边框），滚动范围为 104px。

作为回报，垂直滚动条会占用一些水平空间，因此您可能也会因此获得水平滚动条。

您可以考虑使用calc 通过设置高度来解决此问题：

.content {
  height: calc(100% - 104px);
}