前言

一直被iframe的高度自适应的问题困扰着，今天终于找到完美解决方案，加上以下css即可。

css

iframe {

    display: block;

    border: none;

    height: 90vh;/*设置高度百分比,一直调到只有一个滚动调为止*/

    width: 100%;

}

示例代码

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title></title>

    <style type="text/css">

        iframe {

            display: block;

            border: none;

            height: 90vh;/*设置高度百分比,一直调到只有一个滚动调为止*/

            width: 100%;

        }

    </style>

</head>

<body>

    <iframe id = "iframe" src="./line.html"></iframe>

</body>

</html>

外层网页的高度固定为浏览器窗口高度，这样一来滚动条就只有一个，即iframe嵌套的内层网页的滚动条。

iframe高度自适应 完美解决的更多相关文章

  1. 谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法，跨域调用JS不再是难题！

    谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法 导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个 ...

  2. 完美实现跨域Iframe高度自适应【Iframe跨域高度自适应解决方案】

    Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的“BUG”就是iframe的高度无法自动适应,这一点让很多 ...

  3. CSS完美实现iframe高度自适应（支持跨域）

    Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的"BUG"就是iframe的高度无法自 ...

  4. 真正解决iframe高度自适应问题

    1.前言 解决iframe高度自适应问题有两种方法1.pym2.手动设置iframe的高度 本文主要是总结第二种实现方式,因为第一种pym.js插件我没用懂 如果使用iframe时,遇到以下的需求: ...

  5. iframe高度自适应（同域）

    今天解决了iframe高度自适应的问题,不过这只是同域下的页面嵌入,以下是代码: function SetCwinHeight(){ var iframeid = document.getElemen ...

  6. 如何让iframe框架和主页面共用一个滚动条(也称为：iframe高度自适应问题)

    最近在前端页面遇到了一个问题,我在一个页面中利用iframe框架引入了一个页面进来,但是这个页面的高度是不叫高的,高出电脑屏幕很多, 所以就引发了iframe框架一个滚动条,然后主页面一个滚动条,这样 ...

  7. iframe高度自适应

    前两天在网上看到了一道面试题,问iframe高度自适应的问题.发现自己之前几乎没有关注过iframe的问题,所以在这里记录一下. 原题目是: 页面A的域名是:http://www.taobao.com ...

  8. iframe高度自适应内容

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

  9. IFrame 高度自适应的两种方式 .

    iframe 高度自适应一般是指: iframe 本身的高度 =  内容高度. 这样做可以使最外层不出现滚动条. 如果网页内容使用了Ajax方式填充内容的话. 由于内容是动态的. 以上方式应该变为: ...

  10. 兼容firefox的iframe高度自适应代码

    网上关于iframe高度自适应的代码有很多,但比较杂乱,本文根据实用性整理了以下代码: JavaScript部分: 折叠JavaScript Code复制内容到剪贴板 <script type= ...

随机推荐

  1. .NET Bioss相关数据读写

    本文我们介绍针对Bios如何读取.写入数据,比如最常见的SN读取以及烧录 WMI查询 先看看WMI方式,可以用于查询和管理Windows系统的各种信息,包括读取BIOS信息 WMI-Win32_BIO ...

  2. VC++2008、2010、2012、2015、2017等IDE中如何设置命令行参数进行程序调试

    有时我们在写程序时会从命令行中直接读入参数,形如: int main(int argc,char**argv){ //your code here return 0; } 其实在vc2010 IDE中 ...

  3. 编译WorldWindJavav2.1.0中的ApplicationTemplate.java文件时有时报出“Exception in thread "main" java.lang.AbstractMethodError: javax.xml.parsers.DocumentBuilderFactory.setFeature(Ljava/lang/String;Z)V”错误的解决办法

    1 问题 编译WorldWindJavav2.1.0中的ApplicationTemplate.java文件时有时报出如下错误: Exception in thread "main" ...

  4. DVWA靶场Insecure CAPTCHA(不安全验证)漏洞所有级别通关教程及源码审计

    Insecure CAPTCHA(不安全验证) Insecure CAPTCHA(不安全验证)漏洞指的是在实现 CAPTCHA(完全自动化公共图灵测试区分计算机和人类)机制时,未能有效保护用户输入的验 ...

  5. Redisson实现分布式锁---原理

    Redisson实现分布式锁(1)---原理 有关Redisson作为实现分布式锁,总的分3大模块来讲. 1.Redisson实现分布式锁原理 2.Redisson实现分布式锁的源码解析 3.Redi ...

  6. 2006. 差的绝对值为 K 的数对数目

    给你一个整数数组 nums 和一个整数 k ,请你返回数对 (i, j) 的数目,满足 i < j 且 |nums[i] - nums[j]| == k . |x| 的值定义为: 如果 x &g ...

  7. Nukem pg walkthrough Intermediate

    nmap 扫描 ┌──(root㉿kali)-[~] └─# nmap -p- -A 192.168.157.105 Starting Nmap 7.94SVN ( https://nmap.org ...

  8. Rec out

    "为你守夜" 在我这里蓝和灰是一种颜色 深蓝等于星灰. 当时看到星灰这个说法的时候,我说 星星怎么会是灰色的呢 在刻板印象里,星星和月亮一样是黄的 月亮有时候确实是黄的 但它颜色很 ...

  9. THUWC2025 游记

    Day -C 先进入金国大臣面积群,然后发现 xyf 又在行联考学生群故事. Day -1 早上赶飞机进京.飞机上启动钢丝.到达大兴机场之后坐火车前往北京西站,然后坐地铁到海淀黄庄.非常饿,但是决定先 ...

  10. Luogu P5005 中国象棋 - 摆上马 / Luogu P8756 国际象棋 题解 [ 蓝 ] [ 状压 dp ] [ 位运算 ]

    国际象棋:模板棋盘状压. 摆上马:需要点思维的棋盘状压,相比上一道题加了"蹩马脚"的设定. Easy_version :国际象棋 概述一下此类棋盘问题的思路: 用二进制数表示出棋盘 ...