前言

一直被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. Qt/C++地图动态绘制折线多边形矩形圆形标注点/可编辑拖动调整大小和位置

    一.前言说明 无论哪一家的地图,都提供了调用函数绘制各种覆盖物,但是有时候的场景是希望进入添加覆盖物模式,然后每次在地图上按下都自动生成对应的覆盖物比如圆形,这样就不需要用户提前知道经纬度坐标等参数, ...

  2. [转]Windows10+VS2013+OpenCV3.0开发环境搭建配置

    首先要说明一下:不管VS(Visual Studio)的版本是什么,也不管OpenCV的版本是什么,配置都大同小异.所以如果您希望在Window下配置OpenCV的开发环境,那么仔细阅读学习这篇文章即 ...

  3. 张正友的相机标定论文Flexible camera calibration by viewing a plane from unknown orientations的翻译

    张正友的相机标定论文Flexible camera calibration by viewing a plane from unknown orientations的翻译: 翻译的pdf版本为:htt ...

  4. Redis 源码简洁剖析 14 - Redis 持久化

    Redis 持久化方式 RDB 优势 劣势 AOF 优势 劣势 Redis < 7.0 参考链接 Redis 源码简洁剖析系列 Redis 持久化方式 主要参考 Redis 官方文档:Redis ...

  5. DVWA靶场File Inclusion (文件包含) 漏洞所有级别通关教程及源码解析

    文件包含 文件包含漏洞(File Inclusion Vulnerability)是一种常见的网络安全漏洞,主要出现在应用程序中不安全地处理文件路径时.攻击者可以利用此漏洞执行恶意文件,或者访问不该被 ...

  6. Docker npm install：npm ERR! code UNABLE_TO_GET_ISSUER_CERT_LOCALLY 。。reason: unable to get local issuer certificate 解决办法

    这个是需要证书导致无法连接,临时解决办法是设置 npm set strict-ssl=false 在 Dockerfile文件里的  RUN npm install 之前添加 RUN npm set ...

  7. manim边做边学--动画联动

    今天介绍Manim中的动画联动的技巧,在数学动画中,动画联动是常用的功能, 比如讲解平面几何中三角形与圆的位置关系变化,通过动画联动可以让圆沿着三角形的边滚动,或者让三角形的顶点在圆上移动,从而直观地 ...

  8. 推荐一款 .NET 智慧水务物联网系统

    前言 本文将介绍如何通过智能水表(如 NB-IoT 水表).智能消火栓.智能阀门.数据采集终端(RTU 或 PLC)及其他前置传感器和设备,开发一个高效.智能的供水管理系统.该系统能够实时采集和分析供 ...

  9. runoob-设计模式

    https://www.runoob.com/design-pattern/design-pattern-tutorial.html 设计模式(Design pattern)代表了最佳的实践,通常被有 ...

  10. 利用bash脚本函数执行创建用户和组，并设置sudo权限等

    示例:利用bash脚本函数执行创建用户和组,并设置sudo权限等: Linux服务器设置历史命令记录,及命令执行的时间: sudo echo 'HISTTIMEFORMAT="%F %T w ...