第一 ：引入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. 浅入浅出 1.7和1.8的 HashMap

    前言 HashMap 是我们最最最常用的东西了,它就是我们在大学中学习数据结构的时候,学到的哈希表这种数据结构.面试中,HashMap 的问题也是常客,现在卷到必须答出来了,是必须会的知识. 我在学习 ...

  2. adb 安装与使用

    什么是adb adb 是有个通用命令行工具 他允许您与模拟器实例或者链接的Android设备进行通信,他可为各种设备操作提供便利,比如安装和调试应用 启动adb 服务在命令行中输入adb start- ...

  3. 幂次方表达:p1010

    1 题目ID: P1010 [NOIP1998 普及组] 幂次方 2 题目描述: 任何一个正整数都可以用 22 的幂次方表示.例如 137=2^7+2^3+2^0137=27+23+20. 同时约定方 ...

  4. EventBridge助力阿里云视觉智能开放平台AI智能存储实践

    本文作者:李建,阿里巴巴达摩院技术专家. 01 视觉智能开放平台(VIAPI)业务场景介绍 阿里云视觉智能开放平台(简称 VIAPI),是基于之前很多技术实践经验积累的 AI 能力的沉淀平台.目前整个 ...

  5. c++题目：切香肠

    c++题目:切香肠 题目 题目描述 有 n 条香肠,每条香肠的长度相等.我们打算将这些香肠切开后全部分给 k 名客人,且要求每名客人获得一样多的香肠.请问最少需要切几刀?注意一刀只能切断一条香肠,每个 ...

  6. 【Devexpres】spreadsheetControl设置可见范围

    // 获得当前电子表格的工作簿 Worksheet worksheet = spreadsheetControl.ActiveWorksheet; // 获得当前用户数据范围 CellRange us ...

  7. MAUI Blazor (Windows) App 动态设置窗口标题

    接着上一篇"如何为面向 Windows 的 MAUI Blazor 应用程序设置窗口标题?" Tips: 总所周知,MAUI 除了 Windows App 其他平台窗口是没有 Ti ...

  8. 【Java Web】项目通用返回模块ServerResponse：枚举code状态码、泛型返回值、序列化注解限制数据

    一.枚举类编写ResponseCode package com.boulderaitech.common; /** * 编写枚举类的步骤 * (1)编写所需的变量 * (2)编写枚举类构造方法 * ( ...

  9. 真正“搞”懂HTTP协议06之body的玩法（理论篇）

    本来啊,本来,本来我在准备完善这个鸽了四年的系列的时候,是打算按照时间的顺序来完成的,好吧.我承认那个时候考虑的稍稍稍稍稍微有些不足,就是我忽略了HTTP协议的"模块性".因为虽然 ...

  10. .net做一个基于ChatGpt的微信机器人吧~[全教程]

    最近这个ChatGPT很火啊,看了B站上很多视频,自己非常手痒,高低自己得整一个啊,很多人都是把ChatGPT和微信结合在一起,正巧我是Wechaty框架的.net sdk贡献者,这不是一应俱全了吗? ...