首页 > 其他 > 详细

使用iframe引入文件后设置响应式宽高以及其他问题解决;

时间:2019-06-01 22:03:06      阅读:97      评论:0      收藏:0      [点我收藏+]

 

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

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

技术分享图片

 

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

技术分享图片

 

 这个是span 的样式

技术分享图片

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

技术分享图片

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

大屏不影响其它元素

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

技术分享图片

 

 技术分享图片

 

 代码如下;

 

 

 

 

技术分享图片

技术分享图片

加上这个会有动画

技术分享图片

 

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

技术分享图片

 

原理解释:

 

 

技术分享图片

 

使用iframe引入文件后设置响应式宽高以及其他问题解决;

原文:https://www.cnblogs.com/sugartang/p/10961147.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!