title: Remove whitespace at bottom of html/body height: 100% layout
body: <p>I'm trying to split a page into two equal areas, with each taking up 100% of the page height, and 50% of the page width.</p>
  
  <p>However, this is resulting in an annoying whitespace at the bottom of the page, which also then leads to an annoying scroll bar on the whole page.</p>
  
  <p>Normally, I'd use my browser's DOM inspector to find what is causing unwanted space, but it is of no use here, since the whitespace appears to be located outside of the html tag (?!).</p>
  
  <p>The HTML is as follows (everything outside of body omitted for clarity)</p>
  
  <pre><code>&lt;body&gt;&lt;div id="box1"&gt;&lt;/div&gt;&lt;div id="box2"&gt;&lt;/div&gt;&lt;/body&gt;
  </code></pre>
  
  <p>The CSS is as follows:</p>
  
  <pre><code>* { box-sizing: border-box; border: 1px solid red; }
  
  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  
  div {
    display: inline-block;
  }
  
  #box1 {
    height: 100%;
    width: 50%;
    background-color: blue;
  }
  
  #box2 {
    height: 100%;
    width: 50%;
    background-color: green;
  }
  </code></pre>
  
  <p>I've also created a <strong><a href="https://jsfiddle.net/9tb1gvhu/" rel="nofollow noreferrer">JSFiddle</a></strong>, which manages to replicate the problem.</p>
  
  <p>I came across <a href="https://stackoverflow.com/questions/24992870/whitespace-out-of-html-body">this question</a> that seems similar, but none of the answers there explain why this is occurring (<a href="https://stackoverflow.com/a/24993118/2045169">this answer</a> does offer an explanation for when img tags are present) and all of the fixes seem like hacks or workarounds.</p>
  
  <p>Edit: In response to the comment (that seems to have disappeared), the problem is replicated in the Fiddle in Firefox 49.02 and Edge 38.14393.0.0 on Windows 10. It also occurs in Chrome 54.0.2840.71, but it is less noticeable (and the scroll bar doesn't seem to move if I have the window maximised).</p>