title: 100% height div
body: <p>I have a <code>#main</code> div that I'd like to fill the page between the header and footer when there is no content.  When there is content, it should push the sticky footer down, which it does.</p>
  <p>CSS:</p>
  <pre><code>#main {
   background: transparent url(&quot;images/main-content.png&quot;) top right repeat-y;
   clear: both;
   overflow: hidden;
   margin-top: -10px;
   height: 100%;
   min-height: 100%;
  }
  </code></pre>
  <p>I'm not sure why this isn't working.  <code>#main</code> inherits from <code>#wrapper</code> and <code>body</code>, so I'd think setting up 100% height and min-height of 100% would work.</p>
  <p>Site:</p>
  <p><a href="http://www.dentistrywithsmiles.com" rel="nofollow noreferrer">http://www.dentistrywithsmiles.com</a></p>
  <p>Thanks in advance for your help with this.</p>