title: Why is 100% height adding a vertical scrollbar?
body: <p>I've looked at many answers to this question but none of them seem to solve my issue. I have a div set to 100% height but it adds a vertical scrollbar to my site. Why is 100% height adding a vertical scrollbar? How can I remove it and still have it be 100% height?</p>
  
  <p><strong>Solutions recommended:</strong></p>
  
  <ul>
  <li>100% height on html &amp; body</li>
  <li>overflow: hidden;</li>
  <li><code>* {overflow:hidden;}</code></li>
  </ul>
  
  <p><em>None of these solve my issue</em></p>
  
  <p><strong><em>Example of my issue (div three adds a scrollbar if height is set to 100%)</em></strong></p>
  
  <p><a href="https://jsfiddle.net/wqy0bx5b/" rel="nofollow">https://jsfiddle.net/wqy0bx5b/</a></p>
  
  <p><strong>Code:</strong></p>
  
  <p>HTML//</p>
  
  <pre><code>&lt;div class="one"&gt;&lt;/div&gt;
  &lt;div class="two"&gt;&lt;/div&gt;
  &lt;div class="three"&gt;
    &lt;h1&gt;Hello&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div class="four"&gt;
    &lt;h1&gt;Hello&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS//</p>
  
  <pre><code>*{
    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;
  }
  </code></pre>