100％の高さに垂直スクロールバーを追加するのはなぜですか？

Question

私はこの質問に対する多くの答えを見てきましたが、どれも自分の問題を解決できないようです。 divを100％の高さに設定していますが、私のサイトに垂直スクロールバーが追加されています。 100％の高さで縦スクロールバーを追加するのはなぜですか？私はそれを取り除くことができますが、それはまだ100％の高さですか？

ソリューションを推奨：HTML &体に

• 100％の高さ
• オーバーフロー：隠されました;これらの
• * {overflow:hidden;}

なし

私の問題の例（高さが100％に設定されている場合div要素3は、スクロールバーが追加されます）

https://jsfiddle.net/wqy0bx5b/

私の問題を解決していません

コードE：

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は私の問題を解決しました。必要

本部3：私はdivの1 & 2の高さを認識していなかった

height: calc(100% - 130px); 

をすでにDIV 3の100％の高さに追加されていましたが、今までのcalcの感謝を聞いたことはありませんかポール。