title: How to get a div to stretch right down to a fixed footer
body: <p>I wish the two sections of my design (see attached image) to extend the whole height of the page. I have tried to create a Fiddle but it just won't work in there, so <a href="http://savster.byethost4.com" rel="nofollow noreferrer">I've put up a link here to demo what I mean</a>.</p>
  
  <p><img src="https://i.stack.imgur.com/GkGq0.png" alt="enter image description here"> </p>
  
  <p>I have set the <code>height</code> of the <code>div</code> that holds the results to <code>100%</code>. However, it doesn't stretch right down to the fixed footer.</p>
  
  <pre><code>#found-results { 
      height: 100%px;
      margin-bottom: 50px;
      background: #CCC;
  }
  </code></pre>
  
  <p>I also want the green box to stretch down to the footer. The CSS is: </p>
  
  <pre><code>.main {
      width: 606px;
      float: left;
      padding: 15px 0 0 16px;
      position: absolute;
      background: green;
      margin-left: 383px;
  }
  </code></pre>
  
  <p>Now, if I add <code>height: 100%;</code> to it, it seems to work, but if one of the tabs contains a lot of text, it doesn't stretch far enough.</p>
  
  <p>Any help will be much appreciated.</p>