js動態獲取瀏覽器或頁面等容器的寬高

首先說一下js動態獲取瀏覽器或頁面等容器的寬高的方法大體有哪些：

網頁可見區域寬： document.body.clientWidth 
網頁可見區域高： document.body.clientHeight 
網頁可見區域寬： document.body.offsetWidth (包括邊線的寬) 
網頁可見區域高： document.body.offsetHeight (包括邊線的高) 
網頁正文全文寬： document.body.scrollWidth 
網頁正文全文高： document.body.scrollHeight 
網頁被卷去的高： document.body.scrollTop 
網頁被卷去的左： document.body.scrollLeft 
網頁正文部分上： window.screenTop 
網頁正文部分左： window.screenLeft 
屏幕分辨率的高： window.screen.height 
屏幕分辨率的寬： window.screen.width 
屏幕可用工作區高度： window.screen.availHeight 
屏幕可用工作區寬度： window.screen.availWidth 

接着我們結合實例來實際說明一下：

有時候我們寫了100%高度的時候，然后因為是當前頁面的子頁面，100%的只是父頁面，而子頁面有下拉條還有內容的話，一些東西就不能都獲取到。

如下圖：

（我們設置了這個div id為“bg”的高度為100%，但下拉條內容拉下去的時候，還是會發現這個背景高度只是父頁面的100%，里面子容器的內容都沒有被這個黑色背景覆蓋到。）

所以在這種時候我們就要開始考慮給這個“bg”設置對應的動態高度。

在js中的初始化方法里寫如下代碼：

//定義id為bg的高度隨內容而變化
    var winHeight=0;
    winHeight=document.body.scrollHeight;
    document.getElementById("bg").style.height=winHeight+"px";
    
}

然后我們再來看效果：

好了，這樣整個頁面都可以被渲染到了。