第一 ：引入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. 如何使用python程序打包工具pyinstaller

    **通过**```pythonpyinstaller -F demo.py```**即可把demo.py打包成可独立运行的demo.exe** **pyinstaller在cmd使用格式:***pyi ...

  2. C#--对上传的Excel文档的处理

    注:ToString对数值字符串的处理 string nID=555; nID.ToString("00000000");   ---00000555 var oFile = Re ...

  3. pta第一次博客

    目录 pta第一次博客 1.前言 2.设计与分析 第二次作业第二题 第三次作业第一题 第三次作业第二题 第三次作业第三题 3.踩坑心得: 4.改进建议 5.总结 pta第一次博客 1.前言 这三次pt ...

  4. OpenMP 入门

    OpenMP 入门 简介 OpenMP 一个非常易用的共享内存的并行编程框架,它提供了一些非常简单易用的API,让编程人员从复杂的并发编程当中释放出来,专注于具体功能的实现.openmp 主要是通过编 ...

  5. vulnhub靶场之NOOB: 1

    准备: 攻击机:虚拟机kali.本机win10. 靶机:NOOB: 1,网段地址我这里设置的桥接,所以与本机电脑在同一网段,下载地址:https://download.vulnhub.com/noob ...

  6. 谷歌浏览器xpath获取网页按钮路径

    谷歌浏览器打开要获取的页面按下F12打开开发者工具 点击最左边的元素选择器,高亮后光标移动到对应元素框(这里只选择里层的元素,如这里要选到input级别) 点击后下方HTML会高亮显示,鼠标移动上去右 ...

  7. Gitlab 和 jenkins 搭建遇到的坑

    1 Gitlab 端口默认 80 所有其他程序提前把端口腾空 2 Gitlab 配置的是pub 公钥 3 java版本要在1.8以上 4 Jenkins 配置私钥 5 需要配置各个目录的workspa ...

  8. 聊聊如何让办公网络直连Kubernetes集群PodIP/ClusterIP/Service DNS等

    想象一下,如果您日常使用的研发测试Kubernetes集群,能够有以下效果: 在办公网络下直接访问Pod IP 在办公网络下直接访问Service Cluster IP 在办公网络下直接访问集群内部域 ...

  9. 【Devexpress】Gridcontorl的列隐藏后再显示位置发生了变化

    首先在可视化界面中排序好每个列的显示位置索引 在窗口初始化时进行记录在字段中 /// <summary> /// 当前显示列的位置索引,用于隐藏后显示进行重新排序位置 /// </s ...

  10. vue cli2安装

    安装nodejs npm install -g npm npm自动更新到最新版本 node -v或者npm -v 查看nodejs是否安装成功   1 2 配置淘宝镜像 npm config set ...