我们知道，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. 图像的读取，显示与保存（基于skimage模块）

    一 skiamge模块 skimage包的全称是scikit-image SciKit (toolkit for SciPy) ,它对scipy.ndimage进行了扩展,提供了更多的图片处理功能.它 ...

  2. 反射实现数据库增删改查DAO及DAOImpl源代码（二）

    配置文件源码 配置文件主要用于配置数据库对象(javaBean),配置表名,配置查询条件,配置删除条件 文件名称:objectConfigPath.properties 这个配置文件里面配置的是另外一 ...

  3. java部分基础知识整理----百度脑图版

    近期发现,通过百度脑图可以很好的归纳总结和整理知识点,本着学习和复习的目的,梳理了一下java部分的知识点,不定期更新,若有不恰之处,请指正,谢谢! 脑图链接如下:java部分基础知识整理----百度 ...

  4. Openjudge jubeeeeeat

    jubeeeeeat 题目链接 总时间限制:  1000ms 内存限制:  256000kB 描述 众所周知,LZF很喜欢打一个叫Jubeat的游戏.这是个音乐游戏,游戏界面是4×4的方阵,会根据音乐 ...

  5. 洛谷P2055 [ZJOI2009]假期的宿舍

    P2055 [ZJOI2009]假期的宿舍 题目描述 学校放假了 · · · · · · 有些同学回家了,而有些同学则有以前的好朋友来探访,那么住宿就是一个问题.比如 A 和 B 都是学校的学生,A ...

  6. Sublime编写React必备插件

    我终于看到了我要的攻略,sublime自带的format实在是不能看不能看不能看. 攻略地址:http://www.jianshu.com/p/ecf6c802fdc5?open_source=wei ...

  7. 系统启动时，BIOS与影子内存_5

    问题:“当我们按下电源开关时,电源开始供电,芯片组撤去RESET信号,CPU马上就从地址FFFF0H处开始执行指令,这个地址在系统BIOS的地址范围内,无论是Award BIOS还是AMI BIOS, ...

  8. map 常用方法

    map遍历: Map map = new HashMap(); Iterator it = map.entrySet().iterator(); while(it.hasNext()) { Map.E ...

  9. webservice初识，SOAP1.1版本

    客户端与服务端模式,非web端发布 1.1      [Jax-ws第一个例子] 1.1.1     第一步:服务端开发 编写SEI(Service Endpoint Interface),SEI在w ...

  10. 基于php缓存的详解

    nginx缓存 nginx有两种缓存机制:fastcgi_cache和proxy_cache 下面我们来说说这两种缓存机制的区别吧 proxy_cache作用是缓存后端服务器的内容,可能是任何内容,包 ...