6

我有一个简单的 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那么问题就消失了。如有必要，我很乐意这样做，但我终其一生都无法弄清楚为什么没有这个就行不通。谁能告诉我为什么？

4

4 回答 4

20

尝试添加

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

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

于 2012-10-04T11:39:20.723 回答
1

添加margin:0到正文

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

工作演示

于 2012-10-04T10:45:29.133 回答
0

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

于 2012-10-04T10:44:24.103 回答
0

................. .演示

嗨，现在给overflow:hidden;这个 id#content

像这样

#content{
overflow:hidden;
}

现场演示

于 2012-10-04T10:48:22.147 回答