有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>
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試
