iframe 高度100%时，出现垂直滚动条

Posted 2023-01-14 wangjun5159

问题

需求是这样的，iframe在一个div中，并且iframe高度与div一样，所以设置了iframe高度是100%，结果div出现了滚动条，在排除了padding、margin的因素外，还是有滚动条。按理说，只有iframe有滚动条，父div不应该有滚动条。在线demo

<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

后续问题

行内元素带来空白节点，也带来inline-block 空白节点问题。
上述解释有点笼统，关于line-height和vertical-align（top、baseline）的详细功能，还得继续研究。

关注公众号

欢迎关注个人公众号

参考

http://stackoverflow.com/questions/9129182/iframe-100-height-causes-vertical-scrollbar
http://www.w3school.com.cn/cssref/pr_dim_line-height.asp
http://www.w3school.com.cn/cssref/pr_pos_vertical-align.asp
http://www.cnblogs.com/dolphinX/p/3236686.html