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. AtCoder Regular Contest 115(without F)

    ARC115 A - Two Choices 题目传送门 分析 可以发现正确答案数量相同当且仅当 \(S_i\) xor \(S_j\) 所含有的 1 的数量为偶数. 再将这个简化一下,正确答案相同当 ...

  2. Docker学习路线9：运行容器

    要启动一个新的容器,我们使用 docker run 命令,后跟镜像名称.基本语法如下: docker run [选项] 镜像 [COMMAND] [ARG...] 例如,要运行官方的 Nginx 镜像 ...

  3. Numpy结构化数组

    Numpy结构化数组 Numpy的结构化数组和记录数组为复合的.异构的的数据提供了非常有效的存储. 结构化数组 In [1]: import numpy as np In [2]: name = [' ...

  4. HarmonyOS Codelab 优秀样例——溪村小镇（ArkTS）

    一.  介绍 溪村小镇是一款展示溪流背坡村园区风貌的应用,包括园区内的导航功能,小火车行车状态查看,以及各区域的风景展览介绍,主要用于展示HarmonyOS的ArkUI能力和动画效果.具体包括如下功能 ...

  5. k8s之持久卷NFS

    一.简介 NFS网络存储卷,Kubernetes原生支持NFS作为Kubernetes的持久存储卷之一.NFS可以实现Pod的跨界点的数据持久性. 首先需要创建一个nfs 服务器,作为存储服务器: 将 ...

  6. 免费报表工具零代码零基础轻松搞定 web 报表

    话说,能制作清单式报表的方式有千千万: 骨灰级的 Excel 控,如果能轻车熟路驾驭 VBA,也能玩出各种花来,再不济借助图表插件外援也能秒杀一众小白选手: 传说中的编程控,只要需求明确没什么做不了的 ...

  7. k8s 深入篇———— 一些容器操作的原理[三]

    前言 简单介绍一下一些容器的操作原理. 正文 docker exec 是怎么做到进入容器里的呢. 比如说: 这里有一个容器,我们可以exec 进去: docker exec -it b265 /bin ...

  8. 力扣49(java)-字母异位词分组（中等）

    题目: 给你一个字符串数组,请你将 字母异位词 组合在一起.可以按任意顺序返回结果列表. 字母异位词 是由重新排列源单词的字母得到的一个新单词,所有源单词中的字母通常恰好只用一次. 示例 1: 输入: ...

  9. 力扣138(java)- 复制带随机指针的链表（中等）

    题目: 给你一个长度为 n 的链表,每个节点包含一个额外增加的随机指针 random ,该指针可以指向链表中的任何节点或空节点. 构造这个链表的 深拷贝. 深拷贝应该正好由 n 个 全新 节点组成,其 ...

  10. 全链路灰度新功能：MSE上线配置标签推送

    简介: 微服务场景下,全链路灰度作为一种低成本的新功能验证方式,得到了越来越广泛的应用.除了微服务实例和流量的灰度,微服务应用中的配置项也应该具备相应的灰度能力,以应对灰度应用对特殊配置的诉求. 为什 ...