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

網(wǎng)頁可見區(qū)域?qū)挘?document.body.clientWidth
網(wǎng)頁可見區(qū)域高： document.body.clientHeight
網(wǎng)頁可見區(qū)域?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

 接著我們結(jié)合實例來實際說明一下：

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

如下圖：

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

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

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

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

然后我們再來看效果：

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

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

最新評論