title: CSS content div to expand to the bottom of the page
body: <p>Ok, i've tried LOTS of solutions offered in StackOverflow about this issue, but none of them have worked. I guess this is a tricky thing and needs a tricky solution.</p>
  
  <p>From what I've seen, each problem is different with this 'occupying' the body thing, so I guess I'm here with a different one.</p>
  
  <p>I really need help here, guys.</p>
  
  <p>Here's my problem: <a href="http://jsfiddle.net/Ff49Z/5/" rel="nofollow">http://jsfiddle.net/Ff49Z/5/</a></p>
  
  <p>And heres what I want: When the "wrapper" div does not fulfill the body, I want the div to expand to the bottom of it anyway. So, in the fiddle, what I'm trying to achieve is not a gray spot on my layout. As you can see, wrappers are 100% height (that is one common solution offered in SO for this problem) and that does not help.</p>
  
  <p>It is this div that does not expand to fit the wrapper:</p>
  
  <pre class="lang-css prettyprint-override"><code>div#middle {
      padding:10px;
      margin:0 auto;
      height: 100%;
  }
  </code></pre>
  
  <p>BTW, when overscrolling, footer sticks and wrapper scrolls. That is the desired behaviour, and it works flawlessly.</p>