title: Body height 100% displaying vertical scrollbar
body: <p>Out of curiosity, considering the example below, why does having the margin on the #container div cause a vertical scrollbar to appear in the browser? The container is much smaller in height than the body height which is set to 100%.</p>
  
  <p>I have set the padding and margins to 0 for all elements except the #container. Note that I have deliberately omitted absolute positioning on the #container div. In this case how is the browser calculating the height of the body and how is the margin affecting it?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
  * { padding:0; margin:0;}
  html, body { height:100%; }
  #container
  {
    padding:10px;
    margin:50px;
    border:1px solid black;
    width: 200px;
    height: 100px;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id='container'&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Example also on <a href="http://jsfiddle.net/Neodymium/kqem5/">JSFiddle</a></p>