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

Question

我有一个简单的 HTML 页面，其中边栏 float 到左侧，所有内容都 float 到右侧。在主要内容区域我有一个 <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 } 是布局原因所必需的；我无法更改它。)

你可以看到它在这个 fiddle 上“工作”: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> , 作为一个 inline 元素，初始值为 vertical-align:baseline ，而是一个 height:100%内联元素会将基线“推”低几个像素(因为最初基线比底部高几个像素)，

所以父DIV正在考虑“好的内容将低 2 个像素，我需要为此腾出空间”。

你可以在this fiddle中看到这个效果(检查您的浏览器控制台并注意两个 bottom 对象的 ClientRect 属性)。