title: DIV with 100% height is too tall even without content
body: <p>I'm trying to implement a <a href="http://ryanfait.com/sticky-footer/" rel="nofollow">sticky footer</a> which is working except that the main wrapping div's 100% height is extending way too tall (#body-wrap) and it's causing a huge gap between the content and the footer.  So instead of the footer sitting at the bottom of the screen like it's supposed to, I have to scroll down the page past the huge gap to view it.</p>
  
  <p>I have something like this as my HTML:</p>
  
  <pre><code>&lt;div id="body-wrap"&gt;
  
      &lt;div id="content"&gt;
  
               [about 100px of content here]
  
      &lt;/div&gt;&lt;!-- end #content --&gt;
  
  &lt;div class="push"&gt;&lt;/div&gt;
  
  &lt;/div&gt;&lt;!-- end #body-wrap --&gt;
  
  &lt;div id="footer-wrap"&gt;
  
      &lt;div id="footer-content"&gt;
  
                [about 300px of content here]
  
      &lt;/div&gt; &lt;!-- end #footer-content --&gt;
  
  &lt;/div&gt; &lt;!-- end #footer-wrap --&gt;
  </code></pre>
  
  <p>And my CSS:</p>
  
  <pre><code>html, body {
  height: 100%;
  }
  
  #body-wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -300px; /* the bottom margin is the negative value of the footer's   height */
   }
  
  .footer-main-wrap, .push {
  height: 300px; /* .push must be the same height as .footer */
  }
  </code></pre>
  
  <p>Anyone have any idea why the a 100% height would extend further than the content?</p>