一直觉得要用JS才能实现iframe高度的自适应，其实CSS也可以，而且实现的更好，只是需要给包裹iframe的DIV设置个高度，然后让irame高度设置成100%就可以自适应了。

完美版Iframe自适应高度====>推荐使用

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

<title>iframe高度自适应</title>

<style>

  *{margin:0; padding:0;}

  html,body{height:100%;}

  .header{width: 100%;height:50px;background: #11c1f3; }

  .container{padding:0 0 0 200px;overflow: hidden;}

  .container .main{position:absolute; width:auto; height:auto; top:50px; left:200px; right:0; bottom:0; overflow:hidden;}

  .container .left{width:200px; height:auto;  background:#ef473a; position:absolute; left:0; top:50px; bottom:0; overflow: auto;}

</style>

</head>

<body>

<div class="header">顶部导航区域...</div>

<div class="container">

  <div class="main">

    <iframe class="mainFrame" src="http://www.cnblogs.com/leyi" width="100%" height="100%" frameborder="0"></iframe>

  </div>

  <div class="left">左侧导航区域...</div>

</div>

</body>

</html>
 table版Iframe自适应高度打造高度自适应的后台布局框架=====> 

<style>

    *{ margin:0; padding:0}

    body, html{ height:100%; width:100%; overflow:hidden;} /*这个高度很重要*/

    #frametable .header{ height:40px; background:#ddd; border-bottom:2px solid #999;}

    #frametable .left{ width:150px; border-right:2px solid #999; background:#ddd; height:100%;}

</style>

<table id="frametable" cellpadding="0" cellspacing="0" width="100%" height="100%" style="width: 100%;">

    <tr>

        <td colspan="2" height="40">

            <div class="header">

                <!-- header menu -->

            </div>

        </td>

    </tr>

    <tr>

        <td valign="top" width="150" height="100%"> <!--这个高度很重要-->

            <div class="left"><!-- left menu --></div>

        </td>

        <td valign="top" width="100%" height="100%"> <!--这个高度很重要-->

            <iframe id="iframe" name="main" src="http://www.baidu.com" width="100%" allowtransparency="true" width="100%" height="100%" frameborder="0" scrolling="yes" style="overflow:visible;"></iframe>

        </td>

    </tr>

</table>

操作iframe=====>

    contentWindow //所有浏览器都支持的

    contentDocument //ie 6 7 不支持

    document.getElementById('iframe_id').contentWindow.document.getElementById('子页面元素节点');

    window.parent  //子frame操作父级页面

    window.parent.document.getElementById('父页面元素节点').style.cssText=..

    window.top //获取最顶层一级页面

    window.top.document.getElementById('最顶层页面元素节点').style.cssText=..

    //防止被嵌套：

    if(window!=window.top){

        window.top.location.href=window.location.href

    }

iframe的传值方式=====>

1、jsonp

2、localstorage

3、postMessage

　　

　　

iframe内容自适应高度的更多相关文章

  1. Jquery实现textarea根据文本内容自适应高度

    本文给大家分享的是Jquery实现textarea根据文本内容自适应高度,这些在平时的项目中挺实用的,所以抽空封装了一个文本框根据输入内容自适应高度的插件,这里推荐给小伙伴们. autoTextare ...

  2. jQuery实现iframe的自适应高度

    假设我们在当前页面要嵌套一个iframe 1 <iframe id="myframe" src="test.html" height="240& ...

  3. html5 textarea 文本框根据输入内容自适应高度

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  4. iframe 随内容自适应高度

    兼容性好的 html代码: <iframe src="enterprise/enter_edit.aspx" id="mainframe" framebo ...

  5. iframe框架自适应高度 uncanght SecurityError: Blocked a frame with origin "null" from accessing a frame ....

    来源于crm项目的contact/edit.html 一.背景是这样的 最近在做crm系统的前端页面,有一个页面呢,点击“查看全部信息”时会弹出,这个弹窗里面又有分页导航,分页不是使用ajax 异步刷 ...

  6. IOS UILabel 根据内容自适应高度

    iOS Label 自适应高度  适配iOS7以后的版本 更多 self.contentLabelView = [[UILabel alloc] init]; self.contentLabelVie ...

  7. 关于使用iframe标签自适应高度的使用

    在ifrome内设定最小高度,(此方法只适用于页面内切换高度不一.但是会保留最大高度,返回后保持最大高度不再回到最初页面的高度) <iframe id="one4" widt ...

  8. ios label根据内容自适应高度

    label自适应高度,想必大家也都很熟悉怎么去做,上代码: UILabel *label3 = [[UILabel alloc]initWithFrame:CGRectMake(150, 50, 15 ...

  9. MiniUi遇到的一个Bug或者说坑,以div里面的内容自适应高度

    页面源码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...

随机推荐

  1. java 通过域名获取ip

    1. java InetAddress[] allByName = InetAddress.getAllByName("www.baidu.com"); 2. nslookup

  2. [MVC框架]利用@Scheduled注解创建定时执行的程序

    新写的项目中有一个地方要用到定时器,然后就用了spring的@Scheduled注解,顺手就给记录下来了,免得下次用的时候还要翻以前的项目,顺便分享出来,给没用过的兄弟姐妹们做个参考. 这次主要用的是 ...

  3. java使用Iterator 迭代器

    在springboot中,findall返回的类型为Iterable, Iterator 常用方法: hasnext() next(); Iterable<User> iterable = ...

  4. 使用Retrofit时常用到的注解

  5. mysql 查询优化 ~ select count 知多少

    一 简介:今天咱们来聊聊mysql的查询总数 二 具体介绍 1 从引擎层面说 myisam  myisam的扫描总行数是非常快的,这是因为myisam会将表的总行数存储起来,定期维护,但是注意,一旦加 ...

  6. Python学习笔记-转义字符

    Python转义字符同C语言的转义字符

  7. 图像超分辨-DBPN

    本文译自2018CVPR DeepBack-Projection Networks For Super-Resolution 代码: github 特点:不同于feedback net,引入back ...

  8. Pytorch tutorial 之Transfer Learning

    引自官方:  Transfer Learning tutorial Ng在Deeplearning.ai中讲过迁移学习适用于任务A.B有相同输入.任务B比任务A有更少的数据.A任务的低级特征有助于任务 ...

  9. BIM开发引挈

    BIM开发引挈: 0.three.js    https://threejs.org/ 1. 陕西葛兰岱尔网络科技有限公司       www.glendale.com.cn 基于WebGL BIM轻 ...

  10. 【转】gcc命令中参数c和o混合使用的详解

    gcc -c a.c  编译成目标文件a.o  gcc a.c  生成执行文件a.exe  gcc -o a -c a.c    编译成目标文件a  gcc -o a  a.c    生成执行文件a. ...