(轉)iframe 高度100%時,出現垂直滾動條

問題

需求是這樣的,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

相關文章
相關標籤/搜索