我们知道，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. 聊聊 CDN 缓存与浏览器缓存

    CDN 是互联网上内容分发的重要一环.无论您之前是否了解过 CDN,其实它已经在您的日常生活中发挥作用了.比如您正在淘宝挑选心仪的商品,或者在观看一段令人捧腹的视频,以及您正在阅读的这篇文章,这些资源 ...

  2. Java中Method.invoke方法，反射？

    正常来说,我们调用对象的方法是通过dot运算符来进行的,这里我们介绍另一种方法,有以下几个步骤:1,获取该类的Class Type:2,通过getMethod方法获取Method对象:3,通过调用in ...

  3. oracle基本命令

    1.首先,创建(新)用户: create user username identified by password; username:新用户名的用户名 password: 新用户的密码也可以不创建新 ...

  4. gulp前端自动化构建工具

    博主不易,不求赞赏,希望把自己遇到的难点写出来,以及希望自己能有能力写出一篇不错的博文. 前端构建工具本人 bootstrap+jquery用gulp vue+element 用webpack 引文 ...

  5. Codeforces Round #365 (Div. 2) B

    Description Little Mishka is a great traveller and she visited many countries. After thinking about ...

  6. oracle的存储过程优缺点

    oracle的存储过程优缺点 1.存储过程可以使得程序执行效率更高.安全性更好,因为过程建立之后 已经编译并且储存到数据库,直接写sql就需要先分析再执行因此过程效率更高,直接写sql语句会带来安全性 ...

  7. Caused by: MetaException(message:Hive Schema version 2.1.0 does not match metastore's schema version 1.2.0 Metastore is not upgraded or corrupt)

    解决方案汇总: ()删除HDFS上的hive数据与hive数据库 hadoop fs -rm -r -f /tmp/hive hadoop fs -rm -r -f /user/hive ()删除My ...

  8. Ubuntu14.04下sogou输入法的输入框只显示英文不显示中文的问题

    解决方法:首先强制更新,把依赖文件全部安装 sudo apt-get install -f 如果仍然不管用,删除sogou的配置文件,在~/.config目录下,一般情况下是SogouPY.Sogou ...

  9. vim配置成c++IDE

    mv ~/.vimrc ~/.vimrcbak mv ~/.vim ~/.vimbak git clone https://github.com/handy1989/vim.git mv vim/.v ...

  10. 屏蔽“您目前使用的Discuz!程序有新版本发布,请及时升级！”提示

    在/discuz/source/admincp目录下找到文件:admincp_main.php 找到第49行: if($_G['uid'] && $_G['member']['allo ...