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个像素，我需要腾出空间”。

您可以在this fiddle中看到此效果（请检查您的浏览器控制台并注意bottom对象的ClientRect属性。）

Answer 2

将margin:0添加到正文

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

工作 DEMO

Answer 3

将margin: 0添加到您的html, body {}部分。

Answer 4

.................. .demo

您好现在向overflow:hidden;提供此身份#content

就像这样

#content{
overflow:hidden;
}

的 Live demo 的

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

4 个答案: