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. C++ atomic

    atomic 每个 std::atomic 模板的实例化和全特化定义一个原子类型.若一个线程写入原子对象,同时另一线程从它读取,则行为良好定义. 另外,对原子对象的访问可以建立线程间同步,并按 std ...

  2. 【郑州轻工业大学】HarmonyOS宠物健康系统的开发分享

    原文:https://mp.weixin.qq.com/s/upcS6PcMS7UBR5jgoP7eow,点击链接查看更多技术内容. 本期我们给大家带来的是家庭宠物健康监测系统开发者杨光的分享,希望能 ...

  3. 第十五篇：JavaScript 之 Dom操作

    一.后台管理页面布局 主站布局 <div class="pg-header"></div> <div style="width:980px; ...

  4. 树模型-CART树

    分类回归树CART CART树是后面所有模型的基础,也是核心树 在ID3算法中我们使用了信息增益来选择特征,信息增益大的优先选择.在C4.5算法中,采用了信息增益比来选择特征,以减少信息增益容易选择特 ...

  5. 鸿蒙HarmonyOS实战-ArkUI组件（Shape）

    一.Shape Shape组件是用于创建2D形状和粒子效果的组件.它可以创建包括圆形.正方形.三角形和多边形等基本形状,同时还可以自定义形状.Shape组件创建各种不同的效果,例如火花.烟雾.雨滴等. ...

  6. asyncio和aiohttp携程并发

    import asyncio from aiohttp import web import time async def process(): for i in range(10): print(&q ...

  7. 《c#高级编程》第2章C#2.0中的更改（二）——匿名类型

    一.概念 C#中的匿名类型是一种特殊类型,可以在运行时动态创建一个对象,该对象可以包含多个属性,这些属性的名称和类型可以在创建时指定.相对于定义具体的类,匿名类型更加灵活和简洁. C#的匿名类型通常用 ...

  8. 力扣48(java)-旋转图像（中等）

    题目: 给定一个 n × n 的二维矩阵 matrix 表示一个图像.请你将图像顺时针旋转 90 度. 你必须在 原地 旋转图像,这意味着你需要直接修改输入的二维矩阵.请不要 使用另一个矩阵来旋转图像 ...

  9. KubeVela 正式开源：一个高可扩展的云原生应用平台与核心引擎

    美国西部时间 2020 年 11 月 18 日,在云原生技术"最高盛宴"的 KubeCon 北美峰会 2020 上,CNCF 应用交付领域小组(CNCF SIG App Deliv ...

  10. mPaas 研发流程和线上运维介绍

    简介: mPaas 研发流程和线上运维介绍 一. 背景 金融级移动开发平台 mPaaS[1](Mobile PaaS)为 App 开发.测试.运营及运维提供云到端的一站式解决方案,能有效降低技术门槛. ...