我们知道,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

iframe高度随内容自适应的方法的更多相关文章

  1. jQuery简单实现iframe的高度根据页面内容自适应的方法(转)

    本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法.分享给大家供大家参考,具体如下: 方式1: //注意:下面的代码是放在和iframe同一个页面中调用 $("#i ...

  2. Textarea高度随内容自适应地增长,无滚动条

    <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; char ...

  3. textarea高度随内容自适应

    最近遇到一个需求,视频名称初始有个生成值,并且支持可以手动修改,修改后名称过长后换行高度随内容增加.刚开始想到用input但是发现input不支持换行.后来用了textarea,用js来控制,下面是实 ...

  4. CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法

    CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法 平时我们布局时候,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱. 这样我们就需要解决如何使用CSS来超出设 ...

  5. jQuery实现textarea高度根据内容自适应

    //jQuery实现textarea高度根据内容自适应 $.fn.extend({ txtaAutoHeight: function () { return this.each(function () ...

  6. 页面嵌套iframe时,怎样让iframe高度根据自身内容高度自适应

    总体思路是这样的,因为iframe里页面的内容是动态加载的,而且电脑屏幕宽度发生变化时,也得相应的去改变iframe标签的高度(如果高度确定就不用这么麻烦了): 首先,我们在父页面中定义一个方法,用来 ...

  7. iframe框根据内容自适应高度

    1.页面 <iframe name="iframe_userCenter" id="iframe" frameborder=2 width=100% he ...

  8. jQuery简单实现iframe的高度根据页面内容自适应的方法

    同域下: //注意:下面的代码是放在和iframe同一个页面中调用 $("#myiframe").load(function () { var myiframeH = $(this ...

  9. iframe高度100%,自适应高度

    声明:有更好的方法在下一篇内容中 100% http://www.360doc.com/content/11/1102/15/55892_161105115.shtml iframe自适应高度 转自: ...

随机推荐

  1. 网格概念 Gutter

    Bootstrap4也是由以上基础概念作为发展 Bootstrap 栅栏式排版 , 总栏数为12  (以下代码探寻问题, 实际上使用方法是错误的) <style> .box { heigh ...

  2. 使用配置类而不使用XML文件(代替bean.xml)对spring进行配置

    以下类是一个配置类,它的作用和bean.xml是一样的注解: @Configuration 作用: 用于指定当前类是一个spring配置类,当创建容器时会从该类上加载注解. 获取容器时需要使用Anno ...

  3. 为什么要使用func.call(this)

    1.为什么要使用func.call(this) 在正常模式下,js 函数里那些你没有声明就使用的变量,其实是访问的全局对象的属性.但是在严格模式下,不允许这种语法,所有变量都必须要显示声明,所以如果你 ...

  4. Scrapy框架初探

    Scrapy 貌似是 Python 最出名的爬虫框架 0. 文档 中文文档:https://scrapy-chs.readthedocs.io/zh_CN/0.24/intro/tutorial.ht ...

  5. 《OD学hadoop》20160903某旅游网项目实战

    一.大数据的落地点 1.数据出售 数据商城:以卖数据为公司的核心业务 2. 数据分析 百度统计 友盟 GA IBM analysis 3.搜索引擎 4. 推荐系统 mahout 百分比 5.精准营销 ...

  6. pb_ds的优先队列实现dijkstra

    用pb_ds的优先队列来做dijkstra..据说noip能用哟. 先来篇关于仿函数的文章. 由于pb_ds支持由迭代器访问元素,并且push操作会返回一个迭代器,merge操作会更新迭代器,相当于帮 ...

  7. Mysql-15-mysql分布式应用

    1.分布式应用的概念和优势 分布式数据库是指利用高速网络将物理上分散的多个数据存储单元连接起来组成一个逻辑上统一的数据库.分布式数据库的基本思想是将原来集中式数据库中的数据分散存储到多个通过网络连接的 ...

  8. layui的tree和form并没有冲突!无限级tree下拉列表和select下拉列表同一页使用!

    在昨天写的随笔中: layui的tree和form同时引用出现冲突的粗略解决办法 https://www.cnblogs.com/xwma/p/10900975.html 提出有冲突,今天在开发中发现 ...

  9. Groovy xlsx

    如果在JMeter安装的“bin”文件夹下有Excel(xlsx)文件,则test.xlsx可以使用以下方法动态填充请求参数: 将tika-app.jar添加到JMeter Classpath 重新启 ...

  10. JOS环境搭建

    想写一个OS很久了,今天开始正式动工了!! 大家都知道操作系统是计算机科学中十分重要的一门基础学科.但是以前在学习这门课时,仅仅只是把目光停留在课本上一些关于操作系统概念上的叙述,并不能对操作系统有着 ...