前言

一直被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. C#中工作线程处理完数据后将处理结果返回给UI主线程通知主线程操作界面

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  2. Appium Android自动化测试配置

    1. 首先需要在Android 手机上安装3个apk文件 https://github.com/appium/appium-uiautomator2-server/releases (2个apk文件) ...

  3. springboot-多模块构建-2

    三个标签完成springboot定时任务配置 1. 问题描述 Java项目定时任务是必备模块,月高风黑夜跑个批处理,记录或者统计一些系统信息. 2. 解决方案: 结合springboot,只需三个标签 ...

  4. biancheng-Spring Cloud教程

    目录http://c.biancheng.net/springcloud/ 1微服务是什么2Spring Cloud是什么3Spring Cloud Eureka4Spring Cloud Ribbo ...

  5. 【java提高】---细则（4）

    java提高(16)---java注解 注解含义注解是JDK1.5之后才有的新特性,它相当于一种标记,在程序中加入注解就等于为程序打上某种标记,之后又通过类的反射机制来解析注解. 一.JDK自带注解 ...

  6. cmake-2

    似懂非懂,一定要搞懂基础的,剩下的边做边学,从案例中入手. 有关cmake的介绍,请参考: 1.https://www.cnblogs.com/pam-sh/p/13885959.html 2.htt ...

  7. 【推荐】一款开源且成熟的OA协同办公系统，自带低代码开发功能！

    项目介绍 今天给大家推荐一款开源且拥有成熟的OA办公系统功能,自带低代码开发平台,可以快速搭建OA系统.人事系统.CRM系统.办公用品系统.项目管理系统.合同管理系统等,让你可以快速上手.快速实施.快 ...

  8. 对rpc长连接与短连接的思考

    大家好,我是思无邪,某go中厂开发工程师,也是OSPP2024的学生参与者! 如果你觉得我的文章有帮助,记得三连支持一下哦! 目前正在深入研究源码,与你们一起进步,共同攻克编程难关! 欢迎关注我的公众 ...

  9. JavaScript数组（包括上一笔记都是ECMAScript对象），BOM对象，DOM对象,html DOM Enent（事件）

    JavaScript数组(包括上一笔记都是ECMAScript对象),BOM对象,DOM对象,html DOM Enent(事件) 1.Arrary; var ret = new Arrary(1,2 ...

  10. 解决Webstorm Nodejs console.log("这是中文") 控制台乱码

    设置文件编码 自定义vm选项文件 添加 文件最后一行添加 -Dfile.encoding=UTF-8 3.修改注册表 Windows+R --> regedit --> 计算机\HKEY_ ...