javascript里面document.body的clientWidth、clientHeight、offsetWidth 、offsetHeight 等属性可以获得网页可见区域的宽和高，window和window.screen也有一些相关属性，例子代码如下：
创新互联建站主营阿勒泰网站建设的网络公司,主营网站建设方案,成都app软件开发,阿勒泰h5微信小程序开发搭建,阿勒泰网站营销推广欢迎阿勒泰等地区企业咨询
bodySCRIPT LANGUAGE="JavaScript"
var s = "";
s += "\r\n网页可见区域宽："+ document.body.clientWidth;
s += "\r\n网页可见区域高："+ document.body.clientHeight;
s += "\r\n网页可见区域宽："+ document.body.offsetWidth +" (包括边线和滚动条的宽)";
s += "\r\n网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)";
s += "\r\n网页正文全文宽："+ document.body.scrollWidth;
s += "\r\n网页正文全文高："+ document.body.scrollHeight;
s += "\r\n网页被卷去的高："+ document.body.scrollTop;
s += "\r\n网页被卷去的左："+ document.body.scrollLeft;
s += "\r\n网页正文部分上："+ window.screenTop;
s += "\r\n网页正文部分左："+ window.screenLeft;
s += "\r\n屏幕分辨率的高："+ window.screen.height;
s += "\r\n屏幕分辨率的宽："+ window.screen.width;
s += "\r\n屏幕可用工作区高度："+ window.screen.availHeight;
s += "\r\n屏幕可用工作区宽度："+ window.screen.availWidth;
s += "\r\n你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";
s += "\r\n你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";
alert(s);
/SCRIPT
HTML代码
body
div class="father" id="father"
h3这是父元素，屏幕分辨率是1366*768/h3
div class="son" id="son"
h3这是子元素，祝大家国庆快乐 /h3
div class="grandson" id="grandson"
h3这是孙子元素，祝大家国庆快乐 /h3
h3我的博客:;/h3
h3程序爱好者QQ群:/h3
h3259280570 /h3
h3欢迎你加入 /h3
h3国庆快乐 /h3
/div
/div
/div
div class="data"
h3数据输出/h3
div id="data"/div
/div
/body
CSS代码
*
{
margin: 0 auto;
}
.father
{
width: 500px;
height: 750px;
border: 5px solid red;
float: left;
}
.son
{
width: 400px;
height: 300px;
border: 5px solid black;
margin: 20px;
}
.grandson
{
width: 150px;
height: 100px;
border: 5px solid blue;
margin: 20px;
overflow: auto;
}
.data
{
width: 600px;
height: 750px;
border: 5px solid red;
float: left;
margin-left: 15px;
}
JS代码
window.onload = function()
{
/*获取元素对象*/
var father = document.getElementById('father');
var son = document.getElementById('son');
var grandson = document.getElementById('grandson');
var data = document.getElementById('data');
data.innerHTML = "h3获取视窗大小(跟窗口大小有关)/h3";
data.innerHTML += "document.body可见区域宽: "+document.body.clientWidth+"br/";
data.innerHTML += "document.body可见区域高: "+document.body.clientHeight+"br/";
data.innerHTML += "window.innerWidth可见区域宽: "+window.innerWidth+"br/";
data.innerHTML += "window.innerHeight可见区域高: "+window.innerHeight+"br/";
data.innerHTML += "document.documentElement可见区域宽: "+document.documentElement.clientWidth+"br/";
data.innerHTML += "document.documentElement可见区域高: "+document.documentElement.clientHeight+"br/";
data.innerHTML += "h3获取元素自身大小(跟是否有滚动条无关)/h3";
data.innerHTML += ".son自身宽度(offsetWidth属性，包括左右边框)："+son.offsetWidth+"br/";
data.innerHTML += ".son自身高度(offsetHeight属性，包括上下边框)："+son.offsetHeight+"br/";
data.innerHTML += ".son可视宽度(clientWidth属性，不包括左右边框)："+son.clientWidth+"br/";
data.innerHTML += ".son可视高度(clientHeight属性，不包括上下边框)："+son.clientHeight+"br/";
data.innerHTML += "h3获取.grandson滚动大小和可视大小/h3";
data.innerHTML += ".grandson滚动宽度(scrollWidth属性)："+grandson.scrollWidth+"br/";
data.innerHTML += ".grandson滚动高度(scrollHeight属性)："+grandson.scrollHeight+"br/";
data.innerHTML += ".grandson可视宽度(clientWidth属性，不包括竖直滚动条和border)："+grandson.clientWidth+"br/";
data.innerHTML += ".grandson可视高度(clientHeight属性，不包括水平滚动条和border)："+grandson.clientHeight+"br/";
data.innerHTML += "h3获取.grandson被卷去的大小(跟滚动条的位置有关)/h3";
data.innerHTML += ".grandson被卷去的高(scrollTop属性，竖直滚动条滑到最底端)："+grandson.scrollTop+"br/";
data.innerHTML += ".grandson被卷去的左(scrollLeft属性，水平滚动条滑到最右端)："+grandson.scrollLeft+"br/";
data.innerHTML += "h3获取浏览器窗口位置(跟窗口大小有关)/h3";
/*
*IE、Chrome、Safari、Opera 都提供了支持 window.screenLeft 和 *window.screenTop，但是Firxfox不支持这个两个属性；
*Firxfox、Chrome、Safari、Opera 都提供了支持 window.screenX *和 window.screenY，但是 IE 不支持这个两个属性；
*/
var leftPos = (typeof window.screenLeft == 'number')?window.screenLeft:window.screenX;
var topPos = (typeof window.screenTop == 'number')?window.screenTop:window.screenY;
data.innerHTML += "body网页正文部分上(window.screenTop(Y))："+ topPos+"br/";
data.innerHTML += "body网页正文部分左(window.screenLeft(X))："+ leftPos+"br/";
data.innerHTML += "h3获取屏幕分辨率/h3";
data.innerHTML += "屏幕分辨率的高(window.screen.height)："+ window.screen.height+"br/";
data.innerHTML += "屏幕分辨率的宽(window.screen.width)："+ window.screen.width+"br/";
data.innerHTML += "h3获取屏幕可用的高宽/h3";
data.innerHTML += "屏幕分辨率的高(window.screen.availHeight)："+ window.screen.availHeight+"br/";
data.innerHTML += "屏幕分辨率的宽(window.screen.availWidth)："+ window.screen.availWidth+"br/";
data.innerHTML += "h3获取.father的边框大小/h3";
data.innerHTML += ".father上边框(clientTop)："+ father.clientTop+"br/";
data.innerHTML += ".father左边框(clientLeft)："+ father.clientLeft+"br/";
data.innerHTML += "h3获取.son到父元素边界的距离(即对应margin+父元素对应的border)/h3";
data.innerHTML += ".son到父元素上边界(offsetTop)："+ son.offsetTop+"br/";
data.innerHTML += ".son到父元素左边界(offsetLeft)："+ son.offsetLeft+"br/";
}
window.outerheight
窗口总高度
和window.screen.availheight一样
window.innerheight
窗口可视区域高度
window.screen.height
显示器屏幕高度
另外：jquery获取高度
$(".thiscrumbs").height()
元素本身高度
$(".thiscrumbs").innerheight()
元素高度+内边距
$(".thiscrumbs").outerheight()
元素高度+内边距+边框
$(".thiscrumbs").outerheight(true)
元素高度+内边距+边框+外边距
经常发现在写JavaScript的时候，都需要用到网页、浏览器或屏幕的高度和宽度来解决布局定位的问题，时常前用后忘，要不就是在网上search，干脆自己总结一下，这样也方便再次使用，省时省力。
网页可见区域宽：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
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight:
获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标
offsetParent
属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由
offsetParent
属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由
offsetTop
属性指定的父坐标的计算顶端位置
event.clientX
相对文档的水平座标
event.clientY
相对文档的垂直座标
event.offsetX
相对容器的水平坐标
event.offsetY
相对容器的垂直坐标
document.documentElement.scrollTop
垂直方向滚动的值
event.clientX+document.documentElement.scrollTop
相对文档的水平座标+垂直方向滚动的量
IE，FireFox
差异如下：
IE6.0、FF1.06+：
复制代码
代码如下:
clientWidth
=
width
+
padding
clientHeight
=
height
+
padding
offsetWidth
=
width
+
padding
+
border
offsetHeight
=
height
+
padding
+
border
IE5.0/5.5：
复制代码
代码如下:
clientWidth
=
width
-
border
clientHeight
=
height
-
border
offsetWidth
=
width
offsetHeight
=
height
总结：关于高度和宽度的东西到是挺多的，具体的有些自己也没有弄懂，通过自己试验了一下，有些得出的值是一样，所以很让人迷惑，只能视情况而定了。
