有a,b,c三個(gè)頁面,a頁面包含b頁面,b頁面包含c頁面.a頁面隨著b頁面自適應(yīng),c頁面隨著b頁面自適應(yīng)
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頁面
將下面這個(gè)js函數(shù)寫到 最最底層的頁面中(即最孫子的那個(gè)頁面) 并在body的onload事件中調(diào)用該方法 【下面這個(gè)公式是萬能公式】
代碼如下:
<script type=text/javascript>
//進(jìn)行iframe的自動(dòng)撐開,讓所有父頁面的iframe都自動(dòng)適應(yīng)包含頁高度
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();>
<!--經(jīng)測(cè)試 這個(gè)最最最子的頁面的body中必須要有一個(gè)有高度的div才行 否則上面的自適應(yīng)生效-->
<div style=height: 1px;>
</div>
<div style=padding-bottom: 10px;> <!--這句話也是必不可少的-->
這里可以寫真正的內(nèi)容 并且給該div的padding-bottom設(shè)一個(gè)值
</div>
</body>