第一 ：引入iframe后背景色解决：

需要先设置 被引入文件的body样式

第二：滚动以及其他样式需要设置，span是为了小屏准备的，处理小屏时候元素距离顶部高度问题；

这个是span 的样式

然后设置iframe   大屏需要固定显示，不占用空间，小屏需要占用50px高度

下一步需要设置小屏点击事件需要满足以下条件：

大屏不影响其它元素

小屏时候高度变低，点击时候展开，高度变大200px以上，收回后高度变50px；这样才不会影响其他元素的点击；

代码如下；

加上这个会有动画

以及这个更加简单化，如果有expand类就移除 否则就添加

原理解释：

使用iframe引入文件后设置响应式宽高以及其他问题解决；的更多相关文章

  1. 获取iframe子页面节点，响应浏览器宽高

    获取iframe子页面节点,响应浏览器宽高 html部分代码 <div> <iframe width="100%" height="100%" ...

  2. iframe跨域动态设置主窗口宽高

    Q:在A项目的a页面嵌入一个iframe,src是B项目的b页面,怎样让a页面的高度跟b页面的高度一样? A:解决跨域方案:增加一个A项目的c页面. 操作步骤: 一,a页面的iframe设置: 获取到 ...

  3. jquery手机端产品列表响应式宽高检测宽度赋值给高度让宽高相同

    在手机端浏览商品列表,开发人员懂得设计图片做正好的尺寸,那样浏览很好,但有人天生泛懒图片都是随手上传不管大小合适不合适,要求还是响应式的.今天就用jquery检测宽度,并赋值给高度来实现错位问题 &l ...

  4. jQueryMobile引入文件后样式无法正常显示

    jQueryMobile引入文件后样式无法正常显示解决方法: jQuery文件必须放在jQueryMobile文件之前 eg:

  5. js判断图片加载完成后获取图片实际宽高

    通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置 ...

  6. ThinkPHP 5 文件上传及指定宽高生成缩略图公共方法

    这个是非常常用的案例,ThinkPHP 5 文件上传及指定宽高生成缩略图公共方法/** * 单文件上传 * name:表单上传文件的名字 * ext: 文件允许的后缀,字符串形式 * path:文件保 ...

  7. ie6下内容会撑开父级设置好的宽高

    在ie6下,内容的宽高会撑开父级设置好的宽高,在其他浏览器下不会. 会出现的问题是:如果内容宽度大于父级设置好的宽度,内容的最后一个元素会换行显示. 注意:在计算时,务必做到精准,不然可能会产生不必要 ...

  8. video设置视频的宽高

    一般情况下<video loop="loop" style="width: 100%;height:300px;" controls="cont ...

  9. js进阶 11-6 jquery如何获取和设置元素的宽高（jquery多方法）

    js进阶 11-6  jquery如何获取和设置元素的宽高(jquery多方法) 一.总结 一句话总结:jquery里面多是方法啊,比如jquery对象的宽高.所以取值是方法,赋值就是方法里面带参数. ...

随机推荐

  1. "一键重装系统软件"操作流程

    博主之前重装系统都是直接用win10系统更新里的重置系统(版本不会变化),和U盘重装电脑出厂映像(有各种品牌自带的软件,而且由于是出场版本,版本很低) 所以这次用"小白一键重装系统" ...

  2. [Pyhton] SimPy 离散事件模拟框架详解 —— 以一个简单的汽车充电排队模拟为例

    目录 一.背景知识 二.SimPy 讲解 2.1 SimPy 概述 2.2 基本概念 2.3 一个汽车开开停停的例子 2.4 在走走停停过程中增加充电过程(过程交互) 2.5 共享资源 三.后续 参考 ...

  3. 优化if、elif过多

    优化if ,elif过多的场景 字典的成员运算,是判断字典的key 思路:把函数的内存地址存到字典当中 def login():    pass def scan(): pass def transf ...

  4. 钉钉dingtalk=6.3.5版本RCE复现

    看到网上公开了钉钉RCE的利用方式,第一时间来复现一下. 钉钉dingtalk=6.3.5版本RCE复现 免责声明: 影响版本: 漏洞POC: 漏洞复现: 存在漏洞版本下载地址: 免责声明: 本文章仅 ...

  5. eBPF 实践 -- 网络可观测

    简介 观测云采集器,是一款开源.一体式的数据采集 Agent,它提供全平台操作系统支持,拥有全面数据采集能力,涵盖基础设施.指标.日志.应用性能.用户访问以及安全巡检等各种场景.通过 eBPF 技术的 ...

  6. tomcat报Address localhost:1099 is already in use

    idea运行tomcat报Address localhost:1099 is already in use 解决方案: 电脑桌面->ctrl+shift+esc 打开任务管理器,选择详细信息,找 ...

  7. SketchUp2020免费中文完整版官网2021教程模型库下载

    SketchUp2022 WIN10 64位安装步骤: 1.先使用"百度网盘客户端"下载SU22_CN_x64安装包到电脑磁盘里,并鼠标右击进行解压缩,然后找到SketchUpPr ...

  8. 【云原生 · Kubernetes】Kubernetes容器云平台部署与运维

    [题目1]Deployment管理 在master节点/root目录下编写yaml文件nginx-deployment.yaml,具体要求如下: (1)Deployment名称:nginx-deplo ...

  9. salesforce零基础学习（一百二十一）Limitation篇之Heap Size Limitation

    本篇参考: https://help.salesforce.com/s/articleView?id=000384468&type=1 https://help.salesforce.com/ ...

  10. 初探Java安全之JavaAgent

    About Java Agent Java Agent的出现 在JDK1.5版本开始,Java增加了Instrumentation(Java Agent API)和JVMTI(JVM Tool Int ...