iframe多級嵌套後，不管子iframe內部內容高度是否超過iframe，父級iframe都會出現滾動條的問題

時間 2019-11-13

標籤 iframe 多級嵌套管子內部內容高度是否超過都會出現滾動條問題欄目 HTML 简体版

原文原文鏈接

最近在項目項目中發現了一個問題，其實這個問題之前碰到過屢次，只是一直沒有找到緣由，今天特地作一下記錄。css

代碼以下：html

<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">&nbsp;</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老是會出現滾動條；html5

隨後我發現iframe的父級容器div老是會比iframe大5px。wordpress

若是要解決問題的話，能夠在父級div中設置高度，可是若是父級div還有div嵌套的話，這樣層層設置就很冗餘了。spa

隨後在網上尋找解決方案，div包裹的iframe有5px的高度差問題.net

2016年10月13日更新:code

這個問題產生的緣由是什麼呢？xml

網上說html規範致使的，若是是htm

<!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">

這樣是沒問題的。blog

而使用html5標籤