iframe 高度100%时,超出DIV并出现垂直滚动条

html+div+css 1561 0 2021-05-04

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

<div>
  <iframe frameborder="no" src="http://www.hilo8.ncom/">
  </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)的详细功能,还得继续研究。

上一篇:css布局 上栏固定 下栏自适应

下一篇:layui-开源模块化前端UI框架常用集合

讨论数量:0

请先登录再发表讨论。 2024-03-28

天涯网魂
3 杠 5 星
TA 的文章
TA 的随言
TA 的资源链