前言

一直被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++音视频开发59-使用mdk-sdk组件/原qtav作者力作/性能凶残/超级跨平台

    一.前言 最近一个月一直在研究mdk-sdk音视频组件,这个组件是原qtav作者的最新力作,提供了各种各样的示例demo,不仅限于支持C++,其他各种比如java/flutter/web/androi ...

  2. Qt/C++音视频开发49-推流到各种流媒体服务程序

    一.前言 最近将推流程序完善了很多功能,尤其是增加了对多种流媒体服务程序的支持,目前支持mediamtx.LiveQing.EasyDarwin.nginx-rtmp.ZLMediaKit.srs.A ...

  3. Qt音视频开发36-USB摄像头解码qcamera方案

    一.前言 除了监控专用的摄像头以外,有一些应用场景用的还是USB摄像头,甚至还有一些单片机或者开发板上用的CMOS摄像头,而Qt在嵌入式领域应用相当广,所以用Qt来读取加载显示USB摄像头和CMOS摄 ...

  4. Qt编写的项目作品33-斗图神器(雨田哥作品)

    一.功能特点 支持HTTP,HTTPS网络表情图片下载,本地缓存. 采用MV模式,支持大量图片表情预览查看. 采用多线程异步下载图片刷新. 图片搜索功能(因网络提供API无信息字段提供,占搜索不了.但 ...

  5. IM通讯协议专题学习(六)：手把手教你如何在Android上从零使用Protobuf

    本文由sweetying分享,为了更好的阅读体验,有较多的内容修订和排版优化. 1.前言 最近我负责的 LiveChat 客服聊天系统到了自研阶段,任务类似于做一个腾讯云IM这样的通信层SDK.在和后 ...

  6. KES的执行计划分析与索引优化

    今天我们继续探讨国产数据库KES的相关内容,本次的讨论重点将放在SQL优化的细节上.作为Java开发人员,我们通常并不需要深入了解数据库的底层实现细节,而是更多地关注如何提升应用性能与数据库的交互效率 ...

  7. 关于存入sessionStorage中boolean值拿出来为字符串

    上面是html部分,然后定义了变量 定义方法 在mounted中获取,然后刷新页面,打印类型为字符串 解决办法

  8. 聊一聊 C#异步 任务延续的三种底层玩法

    一:背景 1. 讲故事 最近聊了不少和异步相关的话题,有点疲倦了,今天再写最后一篇作为近期这类话题的一个封笔吧,下篇继续写我熟悉的 生产故障 系列,突然亲切感油然而生,哈哈,免费给别人看程序故障,是一 ...

  9. Kubernetes GPU 虚拟化方案

    主流架构 Device Plugin:K8s制定设备插件接口规范,定义异构资源的上报和分配,设备厂商只需要实现相应的API接口,无需修改kubelet源码即可实现对其他硬件设备的支持. Extende ...

  10. Netty5 服务端和客户端-copy

    概述netty 5 已经放弃掉了,作为学习netty4和5的差别不大,本例子是基于netty5 https://github.com/netty/netty/issues/4466 线程安全一个thr ...