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

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

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

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

如下圖：

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

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

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

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

然后我們再來看效果：

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

以上所述是小編給大家介紹的js動態(tài)獲取瀏覽器或頁面等容器的寬高詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！