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

網頁可見區(qū)域寬： document.body.clientWidth
網頁可見區(qū)域高： document.body.clientHeight
網頁可見區(qū)域寬： document.body.offsetWidth (包括邊線的寬)
網頁可見區(qū)域高： 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
屏幕可用工作區(qū)高度： window.screen.availHeight
屏幕可用工作區(qū)寬度： window.screen.availWidth

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

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

如下圖：

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

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

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

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

然后我們再來看效果：

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

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

最新評論