前言

一直被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编写手机端视频播放器/推流工具/Onvif工具

    一.视频播放器 同时支持多种解码内核,包括qmedia内核(Qt4/Qt5/Qt6).ffmpeg内核(ffmpeg2/ffmpeg3/ffmpeg4/ffmpeg5/ffmpeg6).vlc内核(v ...

  2. Qt编写安防视频监控系统68-兼容Qt4到Qt6

    一.前言 为了从Qt4.7兼容到Qt6.2及后续版本,着实花了不少精力,前提也是对自定义控件大全和各种跨平台的轮子组件全部做成了兼容Qt4到Qt6,这样只剩下UI这块需要兼容就好办多了,各个击破战略, ...

  3. [转]E1接口介绍

    E1 通道本来设计用来传输电话的,每个 E1(带宽 2.048M)可以传 30 路电话,后来扩大的应用范围,可以用作传网络,串口等不同的业务:E1 是一个基本的传输单元,其最终还是通过光纤来传输的,如 ...

  4. （八）.NET6.0添加通用的Redis功能

    1.添加包:StackExchange.Redis 2.在配置文件里面,新建Redis的有关配置信息 Name是别名,可以任意起.Ip是Redis的服务端地址,例如安装本地,就是127.0.0.1,端 ...

  5. SpringBoot(四) - 整合Mybatis,逆向工程,JPA,Mybatis-plus

    1.SpringBoot整合MyBatis 1.1 application.yml # 数据源配置 spring: datasource: driver-class-name: com.mysql.c ...

  6. AI编程助手带来的洞察和启发——程序员职业的变革

    前言 从chatgpt的横空出世到国内大模型的强势崛起, 从AI只会写诗作画到辅助编程, AI作为新质生产力的重要角色逐渐进入各行各业,为行业带来新的可能性. Cursor.通义灵码这类"A ...

  7. RocketMQ实战—3.基于RocketMQ升级订单系统架构

    大纲 1.基于MQ实现订单系统核心流程的异步化改造 2.基于MQ实现订单系统和第三方系统的解耦 3.基于MQ实现将订单数据同步给大数据团队 4.秒杀系统的技术难点以及秒杀商详页的架构设计 5.基于MQ ...

  8. Keepalived基本原理

    本文分享自天翼云开发者社区<Keepalived基本原理>,作者:Ujnrfc Keepalived简介 Keepalived是Linux下一个轻量级别的高可用解决方案.高可用:广义来讲, ...

  9. 云数据库MySQL多人协同开发实践

    本文分享自天翼云开发者社区<云数据库MySQL多人协同开发实践>,作者:不知不觉 随着云计算技术的快速发展,云数据库作为云计算的重要组成部分,为企业提供了高效.灵活和可靠的数据存储和管理服 ...

  10. 10GSFP+系列光模块

    10GSFP+双纤系列光模块包括SR.LRM.LR.ER.ZR模块,它们的接口类型都是LC双工,且符合IEEE802.3ae.SFF-8472和SFF-8431标准,以下是这几种光模块的具体详情. 1 ...