html - 为什么100%高度要加垂直滚动条？

Question

我看过很多关于这个问题的答案，但似乎没有一个能解决我的问题。我将一个 div 设置为 100% 高度，但它向我的网站添加了一个垂直滚动条。为什么100%高度要加垂直滚动条？我怎样才能删除它并使其保持 100% 的高度？

推荐的解决方案:

• 100% 高度在 html 和正文上
• 溢出:隐藏；
• * {overflow:hidden;}

这些都不能解决我的问题

我的问题示例(如果高度设置为 100%，div 3 添加滚动条)

https://jsfiddle.net/wqy0bx5b/

代码:

HTML//

<div class="one"></div>
<div class="two"></div>
<div class="three">
  <h1>Hello</h1>
</div>
<div class="four">
  <h1>Hello</h1>
</div>

CSS//

*{
  padding: 0;
  margin: 0;
}
html,
body {
  height: 100%;
  width: 100%;
}
.one {
  width: 100%;
  height: 50px;
  background-color: #c4c9d4;
}
.two{
  width: 100%;
  height: 80px;
  background-color: #a7aebe;
}
.three{
  width: 20%;
  height: 100%;
  overflow: hidden;
  float: left;
  background-color: #8a93a8;
}
.four{
  width: 80%;
  float: left;
  background-color: #576075;
}

Answer 1

Paulie_D解决了我的问题。

需要第三部分:

height: calc(100% - 130px);

我没有意识到 div 1 和 2 的高度已经被添加到 div 3 的 100% 高度。到目前为止还没有听说过 calc，谢谢 Paul。