iframe高度100%出现滚动条

路飞
路飞
路飞
43
文章
14
评论
2019年2月27日22:21:17 2 723 419字阅读1分23秒

1 问题描述

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

2 原因分析

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

3 解决方法

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

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

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

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

 

4 例子

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

weinxin
微信公众号
分享IT信息技术、北海生活的网站。提供北海本地化的信息技术服务。
路飞
  • 本文由 发表于 2019年2月27日22:21:17
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
关于EL表达式与thymeleaf 信息技术

关于EL表达式与thymeleaf

前言 很久之前,也许你在JSP代码中会遇到类似${person.name}、${person}这样的代码,这样的代码被称之为EL表达式,看起来像不像现在普遍使用的模板引擎thymeleaf里的用法? ...
Windows 10无法删除恢复分区 信息技术

Windows 10无法删除恢复分区

1  前言 Windows 10安装的时候,默认会创建一些类似【恢复】、【系统保留】分区,强迫症促使我想去删除它们,一般情况,通过【计算机管理】中的【磁盘管理】可以操作,但是你会发现根本没有删除选项,...
Tomcat增加管理账户 信息技术

Tomcat增加管理账户

默认情况下,Tomcat的管理功能是关闭的,如何开启? 使用文本编辑工具打开 ${TOMCAT_HOME}\conf\tomcat-users.xml 文件,在最下面可以看到Tomcat默认把用户以及...
匿名

发表评论

匿名网友 填写信息

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

评论:2   其中:访客  2   博主  0
    • avatar wordpress建站吧 1

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