有a,b,c三个页面,a页面包含b页面,b页面包含c页面.a页面随着b页面自适应,c页面随着b页面自适应
a页面
代码如下:
<body>
<iframe id=main name=main width=980 scrolling=no frameborder=0 src=b页面
onload=this.height=main.document.body.scrollheight;this.width=main.document.body.scrollwidth;if(this.height < 410){this.height=410;}>
</iframe>
</body>
b页面
代码如下:
<body>
<!--左边-->
<div style=flost:left;>
左边菜单
</div>
<!--右边-->
<div style=flost:right;>
<iframe id=testiframe name=testiframe frameborder=0 style=width: 680px; scrolling=no src=c页面></iframe>
</div>
</body>
c页面
将下面这个js函数写到 最最底层的页面中(即最孙子的那个页面) 并在body的onload事件中调用该方法 【下面这个公式是万能公式】
代码如下:
<script type=text/javascript>
//进行iframe的自动撑开,让所有父页面的iframe都自动适应包含页高度
function autoheight(){
var doc = document,
p = window;
while(p = p.parent){
var frames = p.frames,
frame,
i = 0;
while(frame = frames[i++]){
if(frame.document == doc){
frame.frameelement.style.height = doc.body.scrollheight + 'px'; // 这里一定要注意 火狐必须要加'px‘ 否则火狐无效
doc = p.document;
break;
}
}
if(p == top){
break;
}
}
}
</script>
<body onload=autoheight();>
<!--经测试 这个最最最子的页面的body中必须要有一个有高度的div才行 否则上面的自适应生效-->
<div style=height: 1px;>
</div>
<div style=padding-bottom: 10px;> <!--这句话也是必不可少的-->
这里可以写真正的内容 并且给该div的padding-bottom设一个值
</div>
</body>
公众号
事业单位
当前位置：
公考类
招聘类
各类考试
