我们知道,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. Asp.net Core 启动流程分析

    新建的.net core 程序启动本质上是一个控制台应用程序,所以它的入口在Main方法中,所以启动的开始时从Main方法开始. public class Program { public stati ...

  2. mobile web页面调试方法

    此文已由作者张含会授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 开发过程问题排查 Chrome Emulation关键词:使用方便 模拟各种设备尺寸.像素比.自定义user ...

  3. JavaScript -- 数据存储

    Cookie Web应用程序是使用HTTP协议传输数据的.HTTP协议是无状态的协议. 一旦数据交换完毕,客户端与服务器端的连接就会关闭,再次交换数据需要建立新的连接.这就意味着服务器无法从连接上跟踪 ...

  4. C#多进程并行

    为了并行执行多个任务,可以启动多个进程(并行数). 下面提供两种方法,总任务数10,最大并行数4. 一.方法1 using System; using System.Collections.Gener ...

  5. MySQL 逻辑备份mysqldump&mysqlpump&mydumper原理解析

    目录 准备 mysqldump备份 mysqlpump备份 mydumper备份 想弄清除逻辑备份的原理,最好的办法是开启general_log,一探究竟 准备 创建用户 CREATE USER IF ...

  6. 通过sql语句对MySql数据库的基本操作

    一.数据库的基本操作 CREATE DATABASE mybookstore; DROP DATABASE mybookstore; 二.表的基本操作 1.创建表 insert into 表名(字段名 ...

  7. angularJs解决模态框下echarts不显示问题

    例如:摸态框myModal.html,给它命名一个id,id='myModal'; myModal.html页面想画一个echarts图表 这里是angularJs已经封装好的echarts在html ...

  8. 洛谷P1505 [国家集训队]旅游

    题目描述 \(Ray\) 乐忠于旅游,这次他来到了\(T\) 城.\(T\) 城是一个水上城市,一共有 \(N\) 个景点,有些景点之间会用一座桥连接.为了方便游客到达每个景点但又为了节约成本,\(T ...

  9. 扩展JMeter - 创建自定义函数 - String Joiner (翻译)

    JMeter是测试自动化社区中最好的开源工具之一.它提供了所有可能的扩展,可以快速提供我们的测试脚本.为了让我们的生活更轻松,它还让我们通过实现几个接口来提出我们自己的插件. 在本文中,让我们看看如何 ...

  10. Luogu P2455 [SDOI2006]线性方程组 真•高斯消元板子

    果然如Miracle学长所说...调了一天...qwq..还是过不了线下的Hack upd after 40min:刚刚过了 就是多了一个判无解的操作... 当系数都为0,且常数项不为0时,即为无解. ...