一直觉得要用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. Spark SQL自定义外部数据源

    1 涉及到的API BaseRelation: In a simple way, we can say it represents the collection of tuples with know ...

  2. 在Github和oschina上搭建自己的博客网站

    在Github上搭建 - 参考链接 搭建一个免费的,无限流量的Blog----github Pages和Jekyll入门 GitHub + Jekyll 搭建并美化个人网站 用Jekyll搭建的Git ...

  3. Javascript - ExtJs - TabPanel组件

    示例 Ext.create('Ext.tab.Panel', {     width: "100%",     renderTo: "tabBox",      ...

  4. Light oj 1018 - Brush (IV) 状态压缩

    题目大意: 给出n个点的坐标,求至少画多少掉直线才能连接所有点. 题目思路:状态压缩 首先经行预处理,求出所有状态下,那些点不在该状态内 以任意两点为端点求出这条直线的状态 枚举所有状态,找出不在当前 ...

  5. python初级实战-----关于邮件发送问题

    python发邮件需要掌握两个模块的用法,smtplib和email,这俩模块是python自带的,只需import即可使用.smtplib模块主要负责发送邮件,email模块主要负责构造邮件. sm ...

  6. exsi5.5以上版本支持虚拟机的二次虚拟化

    从存储里找到虚拟机的位置 下载并修改虚拟机的.vmx配置文件(记得做好备份) 打开<虚拟机名>.vmx文件,在末尾追加如下字段,保存退出. nce.enable = TRUE hyperv ...

  7. roslaunch & gdb 调试指南（待补充）

    1. 安装xterm sudo apt-get install xterm 2. 在launch文件中添加如下内容: <node name="navigation" pkg= ...

  8. CF1108F MST Unification

    题目地址:CF1108F MST Unification 最小生成树kruskal算法的应用 只需要在算法上改一点点 当扫描到权值为 \(val\) 的边时,我们将所有权值为 \(val\) 的边分为 ...

  9. Linux安装JDK（rpm）

    我以JDK1.8为例 ⒈下载 https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html ...

  10. shell 不使用循环批量创建用户

    ..}|tr " " "\n"|awk '{print "useradd",$0,";date +%N|md5sum|cut -c ...