為什么100％的高度添加垂直滾動條？

Question

我看過很多關於這個問題的答案，但是似乎沒有一個能解決我的問題。 我將div設置為100％高度，但它向我的網站添加了垂直滾動條。 為什么100％的高度添加垂直滾動條？ 我如何才能將其移除並保持100％的高度？

建議的解決方案：

• HTML和正文的高度為100％
• 溢出：隱藏；
• * {overflow:hidden;}

這些都不解決我的問題

我的問題的示例（如果將高度設置為100％，則三格會添加一個滾動條）

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。