将iframe高度设置为100%似乎会导致包含div的溢出。
我有一个简单的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>这是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%;
}(注意到：在任何人问起之前，出于布局原因，#container { position: absolute }是必要的；我不能改变这一点。)
你可以看到它在小提琴上“工作”：http://jsfiddle.net/9q7yp/
其目的是去掉页面底部的白带(也就是说，结果中不应该有垂直滚动条)。如果我将overflow: hidden设置为#content，那么问题就没有了。如果有必要的话，我很乐意这样做，但在我的一生中，我无法弄明白为什么没有这个就不能成功。有人能告诉我为什么吗？
回答 4
Stack Overflow用户
发布于 2012-10-04 11:39: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像素，我需要为这腾出空间”。
您可以在这把小提琴中看到这种效果(检查浏览器控制台并注意两个ClientRect对象的bottom属性)。
Stack Overflow用户
发布于 2012-10-04 10:45:29
将margin:0添加到主体
html, body {
height: 100%;
margin:0 auto;
}工作演示
Stack Overflow用户
发布于 2012-10-04 10:44:24
将margin: 0添加到html, body {}部分。
https://stackoverflow.com/questions/12725436
复制相似问题
腾讯云开发者
