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. 5 HTML表单标签

    5 表单标签 表单主要是用来收集客户端提供的相关信息,提供了用户数据录入的方式,有多选.单选.单行文本.下拉列表等输入框,便于网站管理员收集用户的数据,是Web浏览器和Web服务器之间实现信息交流和数 ...

  2. #线段树，离散#nssl 1476 联

    分析 由于下标过大,考虑离散,不仅仅是区间左右端点 假设只有一个区间从1到\(x\),那么修改后答案应该是\(x+1\) 所以说还要记录右端点+1的位置,你以为这就能A了吗 为了避免标记被覆盖,无论是 ...

  3. 深度剖析 Spring 框架在 Java 应用开发中的优势与应用

    Spring 是用于企业 Java 应用程序开发的最流行的应用程序开发框架.全球数百万开发人员使用 Spring Framework 创建高性能.易于测试和可重用的代码.Spring Framewor ...

  4. 解析 Go 编程语言数据类型：bool、整数、浮点数和字符串详细介绍

    数据类型 数据类型是编程中的重要概念.数据类型指定了变量值的大小和类型.Go是静态类型的,这意味着一旦变量类型被定义,它只能存储该类型的数据. 基本数据类型 Go 有三种基本数据类型: bool:表示 ...

  5. C#实现文件加密、解密及文件拖拽至程序图标直接打开

    引用:https://www.cnblogs.com/longqi293/archive/2010/07/23/1783672.html 下载源码:http://files.cnblogs.com/l ...

  6. Terraform 系列-批量创建资源时如何根据某个字段判断是否创建

    系列文章 Terraform 系列文章 Grafana 系列文章 概述 前文 Grafana 系列 - Grafana Terraform Provider 基础 介绍了使用 Grafana Terr ...

  7. HTML基础之input系列

    <form action=""> <div> 用户名:<input type="text" name="user&quo ...

  8. css 文字溢出省略号

    前言 css 文字溢出后显示省略号,这是一个非常常规的操作,但是你会发现在网上很多给出的例子两行之后显示省略号,却没有用. 这是为什么呢?please look follow. 正文 在一行省略的: ...

  9. Python中两种网络编程方式：Socket和HTTP协议

    本文分享自华为云社区<Python网络编程实践从Socket到HTTP协议的探索与实现>,作者:柠檬味拥抱. 在当今互联网时代,网络编程是程序员不可或缺的一项技能.Python作为一种高级 ...

  10. 涂色-【BFS】

    涂色 有一幅以二维整数数组表示的图画,每一个整数表示该图画的像素值大小,数值在 0 到 65535 之间.给你一个坐标 (sr, sc) 表示图像渲染开始的像素值(行 ,列)和一个新的颜色值 newC ...