一直觉得要用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. 5-5 re模块 正则表达式

    1,正则表达式 正则表达式,就是匹配字符串内容的一种规则. 官方定义:正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个“规则字符串”,这个“规则字 ...

  2. 异步Async

    1.c#异步介绍 异步必须基于委托,有委托才有异步 新建一个window Form程序MyAsync,添加一个按钮,(name)=btnAsync 后台代码如下: using System;using ...

  3. linux中如何使用终端裁剪图片？

    1,首先要安装支持图片裁剪的包: sudo apt-get install imagemagick 需要的话可以update一下, 2,在图片所在位置打开终端,我的我的截图叫screenshot.pn ...

  4. 深入理解JVM - 1 - Java内存区域划分

    作者:梦工厂链接:https://www.jianshu.com/p/7ebbe102c1ae来源:简书简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处. Java与C++之间有一堵 ...

  5. [Docker]CentOS7通过rpm包安装Docker

    前几天写过一篇文章:[Docker]CentOS7下Docker安装教程,直接使用yum命令下载Docker即可.但是前提是你需要***,所以这篇文章来讲讲,如果不会***,该如何安装Docker. ...

  6. shell-自动按省市建立文件夹，并在每个城市下创建当前日期文件夹

    Code: #!/bin/bash date=`date +%Y%m%d` ProName="广东市" CityName="广州市 汕尾市 阳江市 揭阳市 茂名市 江门市 ...

  7. 嵌入式系统C编程之堆栈回溯【转】

    转自:https://www.cnblogs.com/clover-toeic/p/3949896.html 前言 在嵌入式系统C语言开发调试过程中,常会遇到各类异常情况.一般可按需添加打印信息,以便 ...

  8. Linux动态库的编译与使用 转载【转】

    转自:http://www.cnblogs.com/leaven/archive/2010/06/11/1756294.html http://hi.baidu.com/linuxlife/blog/ ...

  9. HttpResonse 要记得关闭

    写了一个小程序,要识别网站上的图片,用到HttpRequest发请求,HttpResponse接受返回数据.刚开始循环可以跑两个,但是总是提示超时.后来查资料发现,在Http协议中,规定了同个Http ...

  10. php-GatewayWorker搭建实时聊天室

    ├── Applications // 这里是所有开发者应用项目 │ └── YourApp // 其中一个项目目录,目录名可以自定义 │ ├── Events.php // 开发者只需要关注这个文件 ...