title: 100% height goes a few pixels off the page?
body: <p>I'm trying to make a box 100% height of the page. But in both Chrome and IE, the following extends a few pixels off the bottom of the page so I have to scroll. Why? Why is there a scrollbar here?</p>
  
  <pre><code>  &lt;!doctype html&gt;
    &lt;html &gt;
    &lt;head&gt;
      &lt;style type="text/css"&gt;
          html, body 
          {
              margin: 0px;
              padding: 0px;
              height: 100%; 
          }
          div {
              border:5px solid black;
              height: 100%;
          }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body &gt;
      &lt;div &gt;This flows a few pixels off the bottom of the page&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>