1 问题描述

现将iframe放置于div中，并且将iframe高度与div高度都设置为100%，结果div出现了滚动条，在排除了padding、margin的因素外，还是有滚动条。按理说，只有iframe有滚动条，父div不应该有滚动条。

2 原因分析

iframe是一个内联元素，默认是跟baseline对齐的，iframe后边有个看不见、摸不着的行内空白节点， 空白节点占据着高度，iframe与空白节点的基线对齐，导致了div被撑开，从而出现滚动条。

3 解决方法

找到原因了，解决方案也就简单了。

第一种，设置iframe的vertical-align: top

第二种，设置父div的font-size: 0，从而影响空白节点的line-height是0，从而不占据高度。

第三种，改变iframe的内联元素性质，改为块级元素，display: block

4 例子

默认图片中的代码展示出的效果是有滚动条的，若想去除滚动条，放开任意一种解决方案的代码块即可。