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

而后咱们再来看效果：

好了，这样整个页面均可以被渲染到了。