title: Make an iframe fill to bottom of screen without using tables
body: <p>I want display a header with arbitrary content above an iframe that takes up the rest of the screen. I have managed to get this working with tables using the following:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  html, body, iframe, table, tr, td {
    margin: 0; padding: 0;
  }
  html, body, iframe, table, #content {
    height: 100%; width: 100%;
  }
  table {
    border-collapse: collapse;
  }
  iframe {
    border: 0;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;table&gt;
      &lt;tr&gt;&lt;td&gt;
        &lt;div id="header"&gt;
          &lt;p&gt;some arbitrary stuff in a header&lt;/p&gt;
          &lt;p&gt;this is sized dynamically&lt;/p&gt;
          &lt;p&gt;it's not a fixed size&lt;/p&gt;
        &lt;/div&gt;
      &lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td id="content"&gt;
        &lt;iframe src="http://www.bing.com/search?q=stackoverflow" /&gt;
      &lt;/td&gt;&lt;/tr&gt;
    &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>That works in Firefox and Chrome, but not IE7 (I don't know why). Without using tables, this is the closest I could get:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  html, body {
    margin: 0; padding: 0;
    height: 100%;
  }
  iframe {
    margin: 0; padding: 0;
    width: 100%;
    border: 0;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="header"&gt;
      &lt;p&gt;some arbitrary stuff in a header&lt;/p&gt;
      &lt;p&gt;this is sized dynamically&lt;/p&gt;
      &lt;p&gt;it's not a fixed size&lt;/p&gt;
    &lt;/div&gt;
    &lt;iframe src="http://www.bing.com/search?q=stackoverflow" /&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This looks the same in all browsers, but the iframe is too short. If I set its height to 100% though, it grows as big as the screen and 2 scrollbars appear (the same as IE7 in the table version). I want the iframe to take up whatever space is left in the browser window, but not more. I would rather not have to resort to Javascript. </p>