問題背景：

在子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

包裹iframe的div與iframe存在高度差的問題解決方案