您的位置：首页 > 其它

iframe多级嵌套后，无论子iframe内部内容高度是否超过iframe，父级iframe都会出现滚动条的问题

2016-10-10 00:00 393 查看

最近在项目项目中发现了一个问题，其实这个问题以前碰到过多次，只是一直没有找到原因，今天特意做一下记录。

代码如下：

<iframe id="mainFrame" name="mainFrame" src="" style="overflow:visible;" scrolling="yes" frameborder="no" width="100%" height="650">
<div id="left">
<iframe id="cmsMenuFrame" name="cmsMenuFrame" src="${ctx}/cms/tree" style="overflow:visible;"
scrolling="yes" frameborder="no" width="100%"></iframe>
</div>
<div id="openClose" class="close"> </div>
<div id="right">
<iframe id="cmsMainFrame" name="cmsMainFrame" src="${ctx}/cms/none" style="overflow:visible;"scrolling="yes" frameborder="no" width="100%"></iframe>
</div>
</iframe>

当我设置这些iframe height:100%的时候，第一个iframe总是会出现滚动条；

随后我发现iframe的父级容器div总是会比iframe大5px。

如果要解决问题的话，可以在父级div中设置高度，但是如果父级div还有div嵌套的话，这样层层设置就很冗余了。

随后在网上寻找解决方案，div包裹的iframe有5px的高度差问题

2016年10月13日更新:

这个问题产生的原因是什么呢？

网上说html规范导致的，如果是

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

这样是没问题的。

而使用html5标签

<!DOCTYPE html>
<html>

就会相差几个像素；

其实不一定就是5个像素，相差的像素取决于行内高度。

为什么这么说呢？因为上面的原因并不是导致这样问题的真正根源。

真正的原因是iframe在html5中的是一个行内样式（display: inline），虽然并没有写出来，但是表现出来的就是一个行内样式。

这也是为什么给iframe设置dispaly:block;或者vertical-align:bottom或者给外层div设置font-size:0就可以让空白空间消失了。img和外层div也有这个问题，也可以这样解决。

感谢张鑫旭大牛的文章，让我明白了这个问题。推荐他的文章：

CSS深入理解vertical-align和line-height的基友关系

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航