title: iframe 100% height causing vertical scrollbar
body: <p>I'm trying to layout a design that has a fixed height header at the top of the screen, and then an iframe below taking up the remaining space.  The solution I came up with is as follows:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
    &lt;head&gt;
      &lt;style type="text/css"&gt;&lt;!-- * {margin: 0;} html, body {height: 100%;width: 100%;margin: 0;padding: 0;}--&gt;&lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div style="height:70px;background-color:blue;"&gt;&lt;/div&gt;
      &lt;div style="position:absolute;top:70px;bottom:0;left:0;right:0;"&gt;
        &lt;iframe src="http://www.google.com" frameborder="0" style="border:0;padding:0;margin:0;width:100%;height:100%;"&gt;&lt;/iframe&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Essentially, I'm creating an absolutely positioned div below the header and sizing it to take up the rest of the space, then putting the full size iframe in there.</p>
  
  <p>The problem I'm running into is that if you paste the code exactly as seen below, using XHTML Strict, in each browser (tested w/ chrome/safari/ie8) you will see a vertical scroll bar with a few pixels of white space below the div.</p>
  
  <p>Doing some experimenting, I found that if I remove the doctype completely it works in safari/chrome, but IE gets even worse, setting the iframe height to 300px or so.  If I set the doctype to transitional, it works in safari/chrome but has the same problem as in the strict case for IE8.  If I use the HTML5 doctype, it has the same problem as strict in all browsers.</p>
  
  <p>Finally, if I remove the iframe in any of these cases, everything is laid out just fine.</p>
  
  <p>Anyone have any ideas?</p>