title: CSS - Content with 100% min-height creates a vertical scrollbar
body: <p>I'm trying to create a page with a header with a navigation menu and a content area that fills the rest of the page, the content have a 100% min-height but even when it's empty it shows a vertical scrollbar because of the header size.</p>
  
  <p>HTML relevant part:</p>
  
  <pre><code>&lt;body&gt;
    &lt;div id="header"&gt;Davi Andrade&lt;/div&gt;
    &lt;nav&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="/"&gt;About&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="/"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="/"&gt;Downloads&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
    &lt;div id="content"&gt;
      Text
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>html, body {
    background: #333333;
    font-family: "Segoe UI", "Lucida Grande", sans-serif;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  
  #header {
    color: #b6b6b6;
    float: left;
    font-family: Megrim;
    font-size: 36px;
    margin: 18px 52px 18px 52px;
    text-shadow: 0 0 3px rgba(0, 18, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
  }
  
  nav li a {
    color: white;
    display: block;
    float: right;
    font-size: 1.3em;
    list-style: none;
    padding: 24px 48px 24px 0;
    text-decoration: none;
  }
  
  #content {
    clear: both;
    background: #3e3e3e;
    box-shadow: 0 -2px 3px rgba(0,0,0,0.35), 0 -1px 0 rgba(255,255,255,0.3);
    min-height: 100%;
  }
  </code></pre>
  
  <p>There is any way to fix this?</p>