title: Setting iframe height to 100% seems to overflow containing div
body: <p>I have a simple HTML page with a sidebar floated to the left and all content to the right. In the main content area I have an <code>&lt;iframe&gt;</code>. However, when I use CSS to set the height of the frame to 100% it seems to overflow the containing <code>div</code> for some reason, resulting in a small amount of white-space after my content.</p>
  
  <p>Here is <strong>my HTML content</strong>:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="sidebar"&gt;
          &lt;p&gt;Sidebar content&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="content"&gt;
          &lt;iframe id="contentFrame"&gt;&lt;/iframe&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is <strong>my CSS</strong>:</p>
  
  <pre><code>html, body {
      height: 100%;
  }
  
  #container {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
      background-color: grey;
  }
  
  #sidebar {
      width: 100px;
      float: left;
      background-color: blue;
      height: 100%;
  }
  
  #content {
      margin-left: 100px;
      height: 100%;
      background-color: yellow;
  }
  
  #contentFrame {       
      border: none;
      padding: 0;
      margin: 0;
      background-color: pink;
      height: 100%;
  }
  </code></pre>
  
  <p>(<strong>NOTE</strong>: Before anybody asks, <code>#container { position: absolute }</code> is necessary for layout reasons; I can't change that.)</p>
  
  <p>You can see it 'working' on this fiddle: <a href="http://jsfiddle.net/9q7yp/" rel="noreferrer">http://jsfiddle.net/9q7yp/</a></p>
  
  <p>The aim is to get rid of the white band along the bottom of the page (i.e. there shouldn't be a vertical scroll-bar in the result). If I set <code>overflow: hidden</code> for <code>#content</code> then the problem goes away. I'm happy to do this if necessary, but I can't for the life of me work out why it doesn't work without this. Can anyone tell me why?</p>