问题
需求是这样的,iframe在一个div中,并且iframe高度与div一样,所以设置了iframe高度是100%,结果div出现了滚动条,在排除了padding、margin的因素外,还是有滚动条。按理说,只有iframe有滚动条,父div不应该有滚动条。在线demo
<div><iframe frameborder="no" src="/"></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)的详细功能,还得继续研究。
关注公众号
欢迎关注个人公众号
参考
/questions/9129182/iframe-100-height-causes-vertical-scrollbar
/cssref/pr_dim_line-height.asp
/cssref/pr_pos_vertical-align.asp
/dolphinX/p/3236686.html