博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
iframe高度随内容自适应的方法
阅读量:5774 次
发布时间:2019-06-18

本文共 544 字,大约阅读时间需要 1 分钟。

我们知道,iframe最大的问题,就是高度的问题,如果你内容的高度是变化,要么你就给你的容器写个固定的高度,如果内容是未知的,显然这个方法并不能达到我们的想要的效果,要么就是通过js来解决这个问题。

以下是我测试的两个页面示例:

1、未自适应的界面

我们可以看到,这个页面显然是没有高度自适应的,这里我也没有设置高度, 是iframe默认的高度来支撑内容。

2、高度自适应页面

通过计算,iframe达到了高度自适应。

 使用iframe标签,需要注意:

我在使用iframe的过程中,将iframe标签写成了单标签的形式,结果导致底部内容不显示。

正确的标签写法是这样的:<iframe></iframe>

去掉iframe中滚动条的方法   scrolling="no"

scrolling有三个属性值,分别是 auto(默认为滚动显示)、no(不显示滚动天) 、yes(显示滚动条);

如果你的项目中有很多的iframe使用,关于高度问题 ,你可以看一下这个链接里面的内容:http://caibaojian.com/iframe-adjust-content-height.html 

转载于:https://www.cnblogs.com/ali-king/p/9412783.html

你可能感兴趣的文章
数据泄漏!我们的信息还安全么?
查看>>
一文详解如何用 TensorFlow 实现基于 LSTM 的文本分类(附源码)
查看>>
《分布式系统:概念与设计》一3.4.1 IP寻址
查看>>
最高检:年底前初步建立检察大数据标准规范体系
查看>>
苹果战FBI影响iPhone销售吗?51%调查者称无影响
查看>>
开源真的在蚕食整个世界吗
查看>>
不学这五招 CIO就等着被淘汰吧
查看>>
欧盟竞争专员暗示:更多美国科技巨头或需补税
查看>>
数据泄露事故诉讼是否加重了人们的不安?
查看>>
台北智慧城市展主打“互联网+”
查看>>
从丑小鸭到白天鹅——数据中心的三次进化
查看>>
MACOM与AOI合作开发数据中心100G QSFP28光模块
查看>>
福州市国家健康医疗大数据中心挂牌 海峡特色鲜明
查看>>
英特尔第六、七代酷睿不安全!存在USB调试缺陷
查看>>
关于微服务和物联网的未来五件事
查看>>
Facebook血拼压力测试:“拆毁”数据中心看影响
查看>>
“领跑者“倒逼光伏产业升级效果显现
查看>>
在Eclipse中使用Maven配置WebDriver+Testng(2)
查看>>
软件测试工程师岗位职责概括
查看>>
勒索病毒传播已受控,全球主流安全厂商均宣称防护
查看>>