一直觉得要用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. xtrabackup 在线主从搭建

    因为意外导致某个MySQL的从服务器宕机,且不可修复,因为是业务数据库,不能停机和锁表进行从库的搭建,所以考虑了使用xtrabackup 进行在线主从搭建. 一.数据库环境 注意:  主从搭建主库一定 ...

  2. DNN-HMM

    <<DNN-HMM.docx>>

  3. Windows下开启composer镜像服务来安装yii

    网上关于使用composer的安装教程挺多的,但是作为新手的我,觉得好凌乱,不断尝试后,终于安装好了.最后总结出,用开启composer的镜像服务来安装yii是最好的啦,当然,归档文件的做法有利有弊就 ...

  4. 5.28 js基础 简介

    Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) JavaScript历史背景介绍 布 ...

  5. es教程

    概念 关系数据库 ⇒ 数据库 ⇒ 表 ⇒ 行 ⇒ 列(Columns) Elasticsearch ⇒ 索引(Index) ⇒ 类型(type) ⇒ 文档(Docments) ⇒ 字段(Fields) ...

  6. jQuery源码分析学习--资料收集--更新中

    1.逐行分析jQuery源码的奥秘 - 网易云课堂  http://study.163.com/course/courseMain.htm?courseId=465001#/courseDetail? ...

  7. Java类加载双亲委托模式优点

    启动类加载器可以抢在标准扩展类加载器之前去装载类,而标准扩展类装载器可以抢在类路径加载器之前去加载那个类,类路径装载器又可以抢在自定义类装载器之前去加载类.所以Java虚拟机先从最可信的Java核心A ...

  8. 设计模式C++学习笔记之九（Template Method模板方法模式）

      模板模式也是相当简单的一种模式,而且是比较常用的.模板模式是定义一个操作中的算法的骨架,而将一些步骤延迟到子类中.TemplateMethod使得子类可以不改变一个算法的结构即可重定义该算法的某些 ...

  9. 专题:CF图论杂题

    题目是来自HZW的博客(构造题我是各种不会...) Solved 1 / 1 A CodeForces 500A New Year Transportation Solved 1 / 1 B Code ...

  10. tomcat session Memcache 共享

    背景 这次做的这个项目并发还真是挺高,单表一天产生百万条记录不在话下.结果导致运行过程中经常丢失数据,卡.慢等.开来终于要搞一次负载均衡了,之前实验学习了不少,但是没有在项目中实际用过,因为并发量不大 ...