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

然后我们再来看效果：

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