??????困擾了我很久的問題：我很想讓一個框架左側的菜單（控件或者是折疊的LI或者別的），能夠自動適應瀏覽器的變化。因為即使是同一分辨率，頁面中的實際高度也不同。不過非常遺憾，網上的文章可謂無數，但基本都不能解決問題。基本上是這兩類：
??????1、頁面中嵌了IFrame，希望Iframe不出現滾動條，大小剛剛和頁面大小一樣，這個基本方法，都是用頁面的document.body.scrollHeight屬性來完成的。其實我也是用Iframe，因為我的折疊菜單是用css+div實現的，沒法用滾動條，所有我用一個Iframe來裝它，當菜單過長時，由Iframe來顯示滾動條。所以我需要的剛好相反：我要讓Iframe的大小剛好等于瀏覽器頁面的大小。
??????理論上講，document.body.clientHeight可以解決這個問題，但實際上不行。
??????2、基本講的都是用CSS來自適應頁面高度，這里不是這個問題。
??????最后，還是在cnblogs上找到了答案：
??????http://dflying.cnblogs.com/archive/2006/03/27/360145.aspx
??????不由得再次感嘆：一千個copy的長篇大論，不如原創的一句話!
我的代碼：

<SCRIPT?LANGUAGE="JavaScript">
??function???window.onload()???
??{???
?document.getElementById("I1").height=document.documentElement.clientHeight;??
?document.getElementById("I1").width=document.documentElement.clientWidth;??
?//document.getElementById("I1").width=240;??//document.getElementById("I1").contentWindow.document.body.scrollHeight
?}
</SCRIPT>?

??????
參考：控制IFrame大小，不顯示滾動條的方法

使用JS代碼，方法有二：??
???
? 1。??
???
? function?? window.onload()??
? {??
? parent.document.all("I1").style.height=document.body.scrollHeight+15;??
? parent.document.all("I1").style.width=document.body.scrollWidth+10;??
? }??
???
? 2。??
???
? function?? window.onload()??
? {??
??????? window.resizeTo(document.body.scrollWidth+10,document.body.scrollHeight+10);??
? }??
? </script>??
???
? 方法一的顯示效果很好，但由于需要和主頁面通信（parent……），對于一些將主頁面和嵌入式頁面放在不同主機的用戶來說，就不能使用了，因為這是一個跨域訪問??
???
? 方法二是一種不錯的辦法，但由于不需要和主頁面通信，當主頁面顯示速度很快時，嵌入式頁面的JS代碼可能不起作用。于是，我修改了方法二：??
???
? <script?? language="Javascript">??
????? var?? times=0;??
????? function?? window.onload(){??
????????? resize=window.setInterval("resizenow();",1000);??
????? }??
???
????? function?? resizenow(){??
????????? window.resizeTo(document.body.scrollWidth+10,document.body.scrollHeight+10);??
????????? if(++times>10){??
????????????? clearInterval(resize);??
????????? }??
????? }??
? </script>?? ?

轉載于:https://www.cnblogs.com/jetz/archive/2007/04/02/696975.html

總結

以上是生活随笔為你收集整理的自适应页面高度的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。