需求是這樣的,iframe在一個div中,而且iframe高度與div同樣,因此設置了iframe高度是100%,結果div出現了滾動條,在排除了padding、margin的因素外,仍是有滾動條。按理說,只有iframe有滾動條,父div不該該有滾動條。html
<div> <iframe frameborder="no" src="https://www.oschina.net/"> </iframe> </div>
html, body { height: 100%; padding: 0; margin: 0; } div { height: 100%; /*第一種解決方案*/ /*font-size:0;*/ } iframe { width: 100%; height: 100%; /*第二種解決方案*/ /*vertical-aglin:top;*/ /*第三種解決方案*/ /*display:block;*/ }
效果圖
spa
通常搜索後,找到了緣由;簡單來講,iframe=inline frame它是一個內聯元素,默認是跟baseline對齊的,iframe後邊有個看不見、摸不着的行內空白節點, 空白節點佔據着高度,iframe與空白節點的基線對齊,致使了div被撐開,從而出現滾動條。查看空白節點搗鬼
找到緣由了,解決方案也就簡單了。
第一種,設置iframe的vertical-align:top
第二種,設置父div的font-size:0,從而影響空白節點的line-height是0,從而不佔據高度。
第三種,改變iframe的內聯元素性質,改成塊級元素,display:block.net
上述解釋有點籠統,關於line-height和vertical-align(top、baseline)的詳細功能,還得繼續研究。等研究透徹,再從新解釋這個問題。code