iframe高度100%出现滚动条

2019年2月27日22:21:17 2 353

1 问题描述

iframe高度100%出现滚动条

现将iframe放置于div中,并且将iframe高度与div高度都设置为100%,结果div出现了滚动条,在排除了padding、margin的因素外,还是有滚动条。按理说,只有iframe有滚动条,父div不应该有滚动条。

iframe高度100%出现滚动条

2 原因分析

iframe是一个内联元素,默认是跟baseline对齐的,iframe后边有个看不见、摸不着的行内空白节点, 空白节点占据着高度,iframe与空白节点的基线对齐,导致了div被撑开,从而出现滚动条。

3 解决方法

找到原因了,解决方案也就简单了。

第一种,设置iframe的vertical-align: top

第二种,设置父div的font-size: 0,从而影响空白节点的line-height是0,从而不占据高度。

第三种,改变iframe的内联元素性质,改为块级元素,display: block

 

4 例子

默认图片中的代码展示出的效果是有滚动条的,若想去除滚动条,放开任意一种解决方案的代码块即可。

iframe高度100%出现滚动条

weinxin
微信公众号
分享IT信息技术、北海生活的网站。提供北海本地化的信息技术服务。
路飞

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:2   其中:访客  2   博主  0

    • avatar wordpress建站吧 0

      框架很少用了吧,除非必须

        • avatar 路飞 3

          @wordpress建站吧 对的,但是有些后台系统用iframe比较方便。