iframe高度随内容自适应的方法
我们知道,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高度随内容自适应的方法的更多相关文章
- jQuery简单实现iframe的高度根据页面内容自适应的方法(转)
本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法.分享给大家供大家参考,具体如下: 方式1: //注意:下面的代码是放在和iframe同一个页面中调用 $("#i ...
- Textarea高度随内容自适应地增长,无滚动条
<HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; char ...
- textarea高度随内容自适应
最近遇到一个需求,视频名称初始有个生成值,并且支持可以手动修改,修改后名称过长后换行高度随内容增加.刚开始想到用input但是发现input不支持换行.后来用了textarea,用js来控制,下面是实 ...
- CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法
CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法 平时我们布局时候,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱. 这样我们就需要解决如何使用CSS来超出设 ...
- jQuery实现textarea高度根据内容自适应
//jQuery实现textarea高度根据内容自适应 $.fn.extend({ txtaAutoHeight: function () { return this.each(function () ...
- 页面嵌套iframe时,怎样让iframe高度根据自身内容高度自适应
总体思路是这样的,因为iframe里页面的内容是动态加载的,而且电脑屏幕宽度发生变化时,也得相应的去改变iframe标签的高度(如果高度确定就不用这么麻烦了): 首先,我们在父页面中定义一个方法,用来 ...
- iframe框根据内容自适应高度
1.页面 <iframe name="iframe_userCenter" id="iframe" frameborder=2 width=100% he ...
- jQuery简单实现iframe的高度根据页面内容自适应的方法
同域下: //注意:下面的代码是放在和iframe同一个页面中调用 $("#myiframe").load(function () { var myiframeH = $(this ...
- iframe高度100%,自适应高度
声明:有更好的方法在下一篇内容中 100% http://www.360doc.com/content/11/1102/15/55892_161105115.shtml iframe自适应高度 转自: ...
随机推荐
- Asp.net Core 启动流程分析
新建的.net core 程序启动本质上是一个控制台应用程序,所以它的入口在Main方法中,所以启动的开始时从Main方法开始. public class Program { public stati ...
- mobile web页面调试方法
此文已由作者张含会授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 开发过程问题排查 Chrome Emulation关键词:使用方便 模拟各种设备尺寸.像素比.自定义user ...
- JavaScript -- 数据存储
Cookie Web应用程序是使用HTTP协议传输数据的.HTTP协议是无状态的协议. 一旦数据交换完毕,客户端与服务器端的连接就会关闭,再次交换数据需要建立新的连接.这就意味着服务器无法从连接上跟踪 ...
- C#多进程并行
为了并行执行多个任务,可以启动多个进程(并行数). 下面提供两种方法,总任务数10,最大并行数4. 一.方法1 using System; using System.Collections.Gener ...
- MySQL 逻辑备份mysqldump&mysqlpump&mydumper原理解析
目录 准备 mysqldump备份 mysqlpump备份 mydumper备份 想弄清除逻辑备份的原理,最好的办法是开启general_log,一探究竟 准备 创建用户 CREATE USER IF ...
- 通过sql语句对MySql数据库的基本操作
一.数据库的基本操作 CREATE DATABASE mybookstore; DROP DATABASE mybookstore; 二.表的基本操作 1.创建表 insert into 表名(字段名 ...
- angularJs解决模态框下echarts不显示问题
例如:摸态框myModal.html,给它命名一个id,id='myModal'; myModal.html页面想画一个echarts图表 这里是angularJs已经封装好的echarts在html ...
- 洛谷P1505 [国家集训队]旅游
题目描述 \(Ray\) 乐忠于旅游,这次他来到了\(T\) 城.\(T\) 城是一个水上城市,一共有 \(N\) 个景点,有些景点之间会用一座桥连接.为了方便游客到达每个景点但又为了节约成本,\(T ...
- 扩展JMeter - 创建自定义函数 - String Joiner (翻译)
JMeter是测试自动化社区中最好的开源工具之一.它提供了所有可能的扩展,可以快速提供我们的测试脚本.为了让我们的生活更轻松,它还让我们通过实现几个接口来提出我们自己的插件. 在本文中,让我们看看如何 ...
- Luogu P2455 [SDOI2006]线性方程组 真•高斯消元板子
果然如Miracle学长所说...调了一天...qwq..还是过不了线下的Hack upd after 40min:刚刚过了 就是多了一个判无解的操作... 当系数都为0,且常数项不为0时,即为无解. ...