第一 ：引入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. 闻道Go语言，6月龄必知必会

    大家好,我是马甲哥, 学习新知识, 我的策略是模仿-->归纳--->举一反三, 在同程倒腾Go语言一年有余,本次记录<闻道Go语言,6月龄必知必会>,形式是同我的主力语言C#做 ...

  2. 三、redis环境安装

    三.redis环境安装 3.1.下载和安装 下载地址:https://github.com/tporadowski/redis/releases   使用以下命令启动redis服务端 redis-se ...

  3. 【lwip】07-链路层收发以太网数据帧源码分析

    目录 前言 7.1 链路层概述 7.2 MAC地址的基本概念 7.3 以太网帧结构 7.4 以太网帧结构 7.5 以太网帧报文数据结构 7.6 发送以太网数据帧 7.7 接收以太网数据帧 7.8 虚拟 ...

  4. 机器学习中in-domine, out-domine的区别

    in-domine 为域内数据,即为训练模型时使用的数据: out-domine 为域外数据,即为检验模型时使用的数据.

  5. 2022春每日一题：Day 32

    题目:[USACO12DEC]First! G 不太记得当时怎么想的了,但是显然,当一个字符串的前缀存在则他一定不是first,然后做法:对于每个字符串,把每个字符结尾跟他有相同前缀的单词的同元素建边 ...

  6. Day17：稀疏数组的超细详解

    稀疏数组的超细详解 一个含有大量重复元素的二维数组,我们可以提取其有效元素,压缩空间,整合为一个稀疏数组. 例如一个五子棋棋盘,我们将棋盘看作为一个二维数组,没有棋子的位置为0:黑棋为1:白棋为2: ...

  7. Cache的相关知识(二)

    1. cache背景知识 为什么的CPU内部需要cache单元?   主要的原因是CPU的速度和内存的速度之间严重不匹配,Cpu处理速度极快,而访问内存慢,cache在这个背景下就诞生了.设计人员通过 ...

  8. FluentFTP能连接却报未将对象引用设置到对象的实例。

    本来项目中用的好好的FTP下载传输,不知道从什么时候开始读取不到了,也上传不了.实际读取的是本地缓存的.因为同事上传不了文件和图片才发现.上源码! #region 下载文件 static byte[] ...

  9. Selenium4+Python3系列（八） - Cookie、截图、单选框及复选框处理、富文本框、日历控件操作

    我所在的城市昨天出了近20+的阳性案例,但这丝毫没有 "影响" 到996的工作时间,当然,也没有影响到我想继续更新文章的决心. 一.cookie常用操作入门 上一篇有写过关于coo ...

  10. TKE 超级节点，Serverless 落地的最佳形态

    陈冰心,腾讯云产品经理,负责超级节点迭代与客户拓展,专注于 TKE Serverless 产品演进. 背景 让人又爱又恨的 Serverless Serverless 炙手可热,被称为云原生未来发展的 ...