我们知道，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. [WIP]laravel 构成的概念

    创建: 2019/06/21 生命周期  概论    检索service provider               service container                     se ...

  2. java知识点积累（一）

    知识点积累 1.关于final的重要知识点: final关键字可以用于成员变量.本地变量.方法以及类: final修饰的成员变量必须在声明时被初始化,或者在构造器中初始化,否则就会报编译错误: 不能够 ...

  3. HBase HA + Hadoop HA 搭建

    HBase 使用的是 1.2.9 的版本.  Hadoop HA 的搭建见我的另外一篇:Hadoop 2.7.3 HA 搭建及遇到的一些问题 以下目录均为 HBase 解压后的目录. 1. 修改 co ...

  4. [AHOI2009]飞行棋 BZOJ1800

    题目描述 给出圆周上的若干个点,已知点与点之间的弧长,其值均为正整数,并依圆周顺序排列. 请找出这些点中有没有可以围成矩形的,并希望在最短时间内找出所有不重复矩形. 输入输出格式 输入格式: 第一行为 ...

  5. 模型事件注意点，before_delete、after_delete、before_write、after_write、before_update、after_update、before_insert、after_insert

    模型类支持before_delete.after_delete.before_write.after_write.before_update.after_update.before_insert.af ...

  6. spark_20180328

    // 2.1 条件表达式val x = 2val s = if (x > 0) 1 else -1if (x > 0) "positive" else -1// 返回值 ...

  7. python_sting字符串的方法及注释

    string类型是python内置的类型,无需安装   方法/属性 说明   capitalize()   把字符串的第一个字符改为大写   casefold()   把整个字符串的所有字符改为小写 ...

  8. vue——解决“You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use /* eslint-disable */ to ignore all warnings in a file. ”

    在build/webpack.base.conf.js文件中,注释或者删除掉:module->rules中有关eslint的规则 module: { rules: [ //...(config. ...

  9. 025 Reverse Nodes in k-Group 每k个一组翻转链表

    给出一个链表,一次翻转 k 个指针节点,并返回修改后的链表.k 是一个正整数,并且小于等于链表的长度.如果指针节点的数量不是 k 的整数倍,那么最后剩余的节点应当保持原来的样子.你不应该改变节点的值, ...

  10. Dijkstra算法(求一点到任意一点的最短距离）

    思路:先找出最短的一个点,也就是起点,从起点出发,找最短的边,同时标记起点为true(代表已经访问过),访问过的点就不用再访问了,依次下去,保证每一次找到的边都是最短的边 到最后没有边可以更新了就代表 ...