iframe内容自适应高度

一直觉得要用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

  

  

上一篇:win7 64位安装pygame


下一篇:pygame学习笔记