問題

需求是這樣的，iframe在一個div中，並且iframe高度與div一樣，所以設置了iframe高度是100%，結果div出現了滾動條，在排除了padding、margin的因素外，還是有滾動條。按理說，只有iframe有滾動條，父div不應該有滾動條。

<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;*/
}

效果圖

分析

一般搜索後，找到了原因；簡單來說，iframe=inline frame它是一個內聯元素，默認是跟baseline對齊的，iframe後邊有個看不見、摸不著的行內空白節點， 空白節點占據著高度，iframe與空白節點的基線對齊，導致了div被撐開，從而出現滾動條。查看空白節點搗鬼
找到原因了，解決方案也就簡單了。
第一種，設置iframe的vertical-align:top
第二種，設置父div的font-size:0，從而影響空白節點的line-height是0，從而不占據高度。
第三種，改變iframe的內聯元素性質，改為塊級元素，display:block

後續問題

上述解釋有點籠統，關於line-height和vertical-align（top、baseline）的詳細功能，還得繼續研究。等研究透徹，再重新解釋這個問題。

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