将iframe高度设置为100%似乎溢出包含div

Question

我有一个简单的HTML页面,左侧有一个侧栏,右侧有所有内容.在主要内容区域我有一个<iframe>.但是,当我使用CSS将帧的高度设置为100%时div,由于某种原因似乎溢出了包含,导致在我的内容之后有少量的空白.

这是我的HTML内容:

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

这是我的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%;
}

(注意:在任何人要求之前,#container { position: absolute }出于布局原因需要;我不能改变它.)

你可以看到它在这个小提琴上"正常工作":http://jsfiddle.net/9q7yp/

目的是摆脱页面底部的白色条带(即结果中不应该有垂直滚动条).如果我设置overflow: hidden的#content,然后问题消失.如果有必要,我很乐意这样做,但我不能为我的生活找出原因,为什么没有这个就行不通.谁能告诉我为什么？

Answer 1

尝试添加

display:block;

到了iframe.http://jsfiddle.net/9q7yp/14/

编辑:

嗯,事实证明这是一个更好的解决方案(在实践中和理解正在发生的事情):

加

vertical-align:bottom;

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

<iframe>,作为内联元素,具有初始值vertical-align:baseline,但height:100%内联元素将"推"基线低几个像素(因为最初基线距底部高几个像素),

所以父母DIV认为"好的内容会低2个像素,我需要为此腾出空间".

你可以在这个小提琴中看到这种效果(检查你的浏览器控制台并注意bottom两个ClientRect对象的属性).