包裹iframe的div与iframe存在高度差的问题解决方案

Posted 2021-01-23 chaoyueqi

问题背景：

在子iframe页面去处理页面单屏满屏显示的问题，要求内容的高度以满屏的百分比显示，先获取屏幕高度$(window.parent).height()，再减去header和footer的高度，然后赋值给iframe，此时发现页面出现滚动条，总是要多减掉几px才不会出现滚动条，即包裹iframe的div与iframe存在高度差（一般是首页，其他页面要求是iframe自适应，所以在其他页面不易发现这个几px的高度差问题），

1.iframe标签上要添加属性：

frameborder="0" marginheight="0" marginwidth="0"

2.给iframe标签添加样式：

vertical-align:bottom

加上该样式后，即可解决高度差的问题。但是页面内容的1px边框出现粗细不一的情况（可能是个别情况，此处仅作个记录备忘），解决方法：在设置百分比时，多减掉1px即可正常显示

.wrap {
    height: calc(100% - 1px);
    width: calc(100% - 1px);
}

3.详细代码如下所示：

<div class="main">
    <iframe src="" name="iframeing" id="iframeing" scrolling="no" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="" style="vertical-align:bottom"></iframe>
</div>

参考原文：https://blog.csdn.net/mafan121/article/details/48264927?utm_source=blogxgwz9