一直觉得要用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. 快速做ssh免密钥登陆

    1.本地生成密钥并发送目标主机 >&1 #采用数字签名RSA或DSA生成密钥文件和私钥文件 id_rsa,id_rsa.pub或id_dsa,id_dsa.pub ssh-copy-id ...

  2. vi常用指令

    vi filename 打开文件 i 进入编辑模式 esc 退出编辑模式 : 进入指令模式 wq 保存退出 q!不存盘强制退出vi 按「a」进入插入模式后,是从目前光标所在位置的下一个位置开始输入文字 ...

  3. scrapy基础 之 爬虫入门：先用urllib2来跑几个爬虫

    1,爬取糗事百科 概况:糗事百科是html网页,支持直接抓取html字符然后用正则过滤 爬取糗事百科需要同时发送代理信息,即user-agent import urllib2,re def pacho ...

  4. 测试cpu的简单工具-dhrystone【转】

    转自:https://blog.csdn.net/feixiaoxing/article/details/9005587 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog ...

  5. UDP可靠传输那些事

    有空来论坛走走,发现讨论udp可靠传输又热了起来,有人认为udp高效率,有人认为udp丢包重传机制容易控制,还有朋友搞极限测试,当然也有人推销自己的东西,这里写一点我个人的看法. udp可靠传输其实非 ...

  6. python连接kafka生产者，消费者脚本

    # -*- coding: utf-8 -*- ''''' 使用kafka-Python 1.3.3模块 # pip install kafka==1.3.5 # pip install kafka- ...

  7. 通过python脚本获取服务器硬件信息

    #!/usr/bin/python # coding:utf-8 """ 采集机器自身信息 1 主机名 2 内存 3 ip与mac地址 4 cpu信息 5 硬盘分区信息 ...

  8. iOS post提交数据有嵌套数组的处理方法

    2017年11月21日17:11:43 解决办法, 修改iOS框架里的代码: http://www.jianshu.com/p/130daa0c2fe7 确实有效, 要不然,  内层的每一个键值对都会 ...

  9. PHP IDE选择标准

    2017年11月17日09:35:01 这里记录一下PHP IDE的选择标准 1.  是否有错误提示, 对于一些 `缺少分号`, `花括号不配对`, `变量未定义就使用`等待的提示是要有的 2. 代码 ...

  10. Mysql按条件计数的几种方法

    最近在给某网站的后台添加一系列的统计功能,遇到很多需要按条件计数的情况.尝试了几种方法,下面简要记录,供大家参考. 问题描述 为使讨论简单易懂,我将问题稍作简化,去掉诸多的背景. 从前有一个皇帝,他有 ...