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

解决方案：

设置 iframe 的 vertical-align: top；

设置父 div 的 font-size: 0，从而影响空白节点的 line-height 是0，从而不占据高度；

改变 iframe 的内联元素性质，改为块级元素，display: none。

iframe 高度设置为0时还有占位_iframe占位的更多相关文章

  1. hbuilder下用plus.barcode.Barcode做二维码扫描，当二维码容器的高度设置过低时，启动扫描会发生闪退

    解决办法: 将固定高度改为百分比

  2. CSS中设置margin:0 auto; 水平居中无效的原因分析

    很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题,margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应,其 ...

  3. 如何设置iframe高度自适应，在跨域的情况下能做到吗？

    在页面上使用iframe来动态加载页面内容是网页开发中比较常见的方法.在父页面中给定一个不带滚动条的iframe,然后对属性src指定一个可加载的页面,这样当父页面被访问的时候,子页面可以被自动加载. ...

  4. 设置iframe高度自适应屏幕高度

    写在前面: 最近在搭建项目前台页面框子的时候,把iframe设置成了固定的高度,导致不同的电脑尺寸访问的时候,高度差异较大,故查了下,将iframe设置成自动适应屏幕高度的方式,这里记录下. 还是直接 ...

  5. 获取iframe子页面内容高度给iframe动态设置高度

    <!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta nam ...

  6. (转)iframe 高度100%时，出现垂直滚动条

    问题 需求是这样的,iframe在一个div中,并且iframe高度与div一样,所以设置了iframe高度是100%,结果div出现了滚动条,在排除了padding.margin的因素外,还是有滚动 ...

  7. Access数据库中Sum函数返回空值（Null）时如何设置为0

    在完成一个Access表中数据统计时,需要统计指定字段的和,使用到了Sum函数,但统计时发现,指定条件查询统计时有可能返回空值(Null),导致对应字段显示为空白,正常应显示为0.基本思路是在获取记录 ...

  8. 动态设置iframe高度

    <%//动态设置iframe高度 %><script language="javascript" type="text/javascript" ...

  9. div中iframe高度自适应问题

    网页分为上.中.下三部分,上.下高度固定中间高度自适应:中间分为左.右两部分,左边宽度固定,右边宽度自适应.现在右侧div是宽度和高度都是自适应,右侧div里有个IFrame,想让IFrame自适应外 ...

  10. iframe高度自适应内容

    JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹.对于用户体验和网站美观起着重要作用. 如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高 ...

随机推荐

  1. mybatis踩坑之integer类型是0的时候会被认为0!=''是假

    当你的参数类型是integer类型,并且传的是0的时候,在SQL里面做if判断的时候 <if test="auditStatus != null and auditStatus != ...

  2. #trie，动态规划#洛谷 2292 [HNOI2004]L语言

    题目 分析 建一棵trie,然后匹配最长前缀可以用\(dp\)做, 如果这个位置可以被匹配到那么可以从这个位置继续匹配 代码 #include <cstdio> #include < ...

  3. 【Kotlin】函数

    1 常规函数 1.1 无参函数 fun main() { myFun() } fun myFun() { println("myFun") // 打印: myFun } 1.2 有 ...

  4. Python - 字典4

    复制字典 您不能简单地通过输入 dict2 = dict1 来复制一个字典,因为 dict2 只会成为 dict1 的引用,对 dict1 的更改也会自动应用于 dict2. 有多种方法可以复制字典, ...

  5. Python-docx插入图片报错“NameError: name 'Inches' is not defined”

    在使用 Python-docx 库操作Word文档时,需要插入图片,在设置宽高时,报错"NameError: name 'Inches' is not defined" 原因是:没 ...

  6. 决策树模型(4)Cart算法

    Cart算法 Cart是Classification and regression tree的缩写,即分类回归树.它和前面的ID3, C4.5等算法思想一致都是通过对输入空间进行递归划分并确定每个单元 ...

  7. UJCMS 9.1.0 发布，国内开源 java cms

    许可协议从GPL-2改为Apache-2.0,更宽松的协议,方便用户将系统集成到自身的应用中. 修复了已知bug,系统更加稳定. 升级日志(9.1.0) 修复前台全文搜索没有结果 web.xml se ...

  8. HDC2021技术分论坛：还有人不知道鸿蒙智联设备认证咋搞？

    作者:maxiansheng,华为鸿蒙智联认证测试专家 2021年5月18日,华为正式宣布原Work With HUAWEI HiLink和Powered by HarmonyOS品牌升级为Harmo ...

  9. Git 中 HEAD、工作树和索引之间的区别

    一.HEAD 在git中,可以存在很多分支,其本质上是一个指向commit对象的可变指针,而Head是一个特别的指针,是一个指向你正在工作中的本地分支的指针 简单来讲,就是你现在在哪儿,HEAD 就指 ...

  10. gRPC入门学习之旅（七）

    gRPC入门学习之旅(一) gRPC入门学习之旅(二) gRPC入门学习之旅(三) gRPC入门学习之旅(四) gRPC入门学习之旅(五) gRPC入门学习之旅(六) 3.6.创建gRPC的桌面应用客 ...