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";
    
}

而後咱們再來看效果：

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