本意是让#content容器自动填补剩余的高度，高度是填满了，但是加上iframe后突然出现了下拉框

一看，高度多了4px，之前已经去掉了iframe的边框，也把iframe里的body去掉了margin和padding

后来想到会不会是因为换行的问题导致多了4px，于是在#content里面加了font-size:0; line-height:0; 果然，多出的4px 消失了，

（在#content中加上overflow:hidden也可达到相同效果）

但是奇怪的事来了，在没有加font-size:0和overflow:hidden;我把代码做了修改，取消了换行

但是底部多出的4px还是存在，，，挠头挠头，，，虽然找到了解决办法，但是不知道多出来的4px 是怎么来的，，，，有路过知道的大侠指教下

来自  https://blog.csdn.net/qq_27596179/article/details/80827862

iframe底边多出4px或5px解决办法

<div id="content">
    <iframe id="iframe" width="100%" height="100%" marginwidth="0" marginheight="0" scrolling="yes" allowtransparency="yes" frameborder="0" style="border:0;background-color:#FFF;" src="" ></iframe>
</div>

<div id="content">
    <iframe id="iframe" width="100%" height="100%" marginwidth="0" marginheight="0" scrolling="yes" allowtransparency="yes" frameborder="0" style="display:block;border:0;background-color:#FFF;" src="" ></iframe>
</div>

来自  https://www.cnblogs.com/Jimc/p/10026661.html

div标签直接包裹img或iframe等标签的时候，div不设置高度，子标签设置高度，此时div标签会被撑开，同时div的高度会比子标签多3px或4px，这是由于子标签底部多了几个px的空白，由于子标签是行内元素，display属性值为inline，类似于文本，需要把img或iframe标签设置为块级元素，即给img、iframe这些标签设置{display:block}   (但是我试了img 肯定可以,iframe好像不行)，就不会出现几像素的空白。