title: CSS: iFrame that fills up rest of screen not being filled up by a div with a constant size
body: <h1>[solved]</h1>
  
  <p>So I have a div with a constant height at the top of my page and I want to have an iFrame below it fill up the rest of the page. Google Images and LinkedIn do something very similar </p>
  
  <p>See: <a href="http://www.linkedin.com/share?viewLink=&amp;sid=s420444224&amp;url=http%3A%2F%2Flnkd%2Ein%2FcnjYt4&amp;urlhash=ZGYM&amp;pk=nprofile-view-success&amp;pp=1&amp;poster=22330283&amp;uid=5484658853024890880&amp;trk=NUS_UNIU_SHARE-title" rel="nofollow noreferrer">http://www.linkedin.com/share?viewLink=&amp;sid=s420444224&amp;url=http%3A%2F%2Flnkd%2Ein%2FcnjYt4&amp;urlhash=ZGYM&amp;pk=nprofile-view-success&amp;pp=1&amp;poster=22330283&amp;uid=5484658853024890880&amp;trk=NUS_UNIU_SHARE-title</a>).</p>
  
  <p>Here is the CSS code I have now:</p>
  
  <pre><code>#header {
    height: 60px;
    float: top;
    position: absolute;
  }
  #iframe {
    margin-top:61px;
    float: bottom;
    position: absolute;
  }
  </code></pre>
  
  <p>Also, within the HTML, I have made the iFrame 99% width and 90% height.</p>
  
  <p>But this isn't working too well. I only want the iFrame to have scroll bars, but as I start to decrease the window size part of it becomes hidden (barely). As a result, a second set of scroll bars appear. By the way, this is the previous SO question I referred to when trying to tackle the problem: <a href="https://stackoverflow.com/questions/446060/css-two-divs-next-to-each-other">CSS two divs next to each other</a></p>
  
  <p>Does anyone know how to recreate what LinkedIn does in CSS?</p>