Setting iframe height to 100% seems to overflow containing div

Question

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 <iframe>. However, when I use CSS to set the height of the frame to 100% it seems to overflow the containing div for some reason, resulting in a small amount of white-space after my content.

Here is my HTML content:

<div id="container">
    <div id="sidebar">
        <p>Sidebar content</p>
    </div>
    <div id="content">
        <iframe id="contentFrame"></iframe>
    </div>
</div>

And here is my CSS:

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%;
}

(NOTE: Before anybody asks, #container { position: absolute } is necessary for layout reasons; I can't change that.)

You can see it 'working' on this fiddle: http://jsfiddle.net/9q7yp/

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 overflow: hidden for #content 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?

Answer 1

Try to add

display:block;

to the iframe. http://jsfiddle.net/9q7yp/14/

---

Edit:

Well, it turns out there's a better solution (both in practice and in understanding what's going on):

Add

vertical-align:bottom;

to iframe#contentFrame. http://jsfiddle.net/9q7yp/17/

<iframe>, as an inline element, has the initial value of vertical-align:baseline, but a height:100% inline element will "push" the base line a few pixels lower (because initially the baseline is a few pixels higher from the bottom),

so the parent DIV is thinking "well content will be 2 pixels lower, I need to make room for that".

You can see this effect in this fiddle (check your browser console and pay attention to the bottom property of both ClientRect object).

Answer 2

Add margin:0 to body

html, body {
    height: 100%;
  margin:0 auto; 
}

WORKING DEMO