标签：style color ar strong 数据 sp div c on
1、Firefox32.03
body
clientHeight：body.padding+ body.height(css设置或内容撑的,以设置的优先);
offsetHeight：body.padding+ body.height(css设置或内容撑的,以设置的优先)+body.border;
scrollHeight：body.padding+ body.height(css设置或内容撑的,谁大谁优先);
documentElement
clientHeight= window.innerHeight -scrollbar.width。
offsetHeight= body.padding+ body.height(css设置或内容撑的,以设置的优先)+body.border + body.margin。
scrollHeight=body.padding+ body.height(css设置或内容撑的,谁大谁优先)+body.border + body.margin,但最小值是documentElement.clientHeight。
说明：
a、设置的优先指的是如果有明确设置body的高度则忽略内容高度
b、可以针对上面的六项属性中的每一项可以依次从下面的三组数据中进行对比来证明
设置的body以及内部元素的样式数据为
<style>
html,body,div{
margin:0;
padding:0;
border:none;
}
</style>
第一组数据
<body style="border:1px solid; height:100px;padding-top:10px;margin-top:50px;">
<div style="height:1000px; width:800px;"></div>
</body>
结果为：
第二组数据：
<body style="border:1px solid; height:100px;padding:10px;margin:50px;">
<div style="height:1000px; width:800px;"></div>
</body>
结果为：
window.screen.height:614
window.outerHeight:460
window.innerHeight:336
body scrollHeight:1010
body offsetHeight:122
body clientHeight:120
documentElment scrollHeight:1061
documentElment offsetHeight:222
documentElment clientHeight:319
第三组数据：
<body style="border:1px solid; height:1000px;padding-top:10px;margin-top:50px;">
<div style="height:100px; width:800px;"></div>
</body>
window.screen.height:614
window.outerHeight:460
window.innerHeight:336
body scrollHeight:1010
body offsetHeight:1012
body clientHeight:1010
documentElment scrollHeight:1062
documentElment offsetHeight:1062
documentElment clientHeight:319
2、chrome36.0.1985.125
body
clientHeight= body.padding + body.height（css设置或内容撑大，设置优先）；
offsetHeight =body.padding + body.height（css设置或内容撑大，设置优先）+ body.border；
scrollHeight=body.padding+ body.height(css设置或内容撑的,谁大谁优先)+body.border+body.margin。
documentElement
clientHeight= window.innerHeight。
offsetHeight = body.padding + body.height（css设置或内容撑大，设置优先）+ body.border+ body.margin;
scrollHeight =body.padding+ body.height(css设置或内容撑的,谁大谁优先)+body.border + body.margin，但最小值是documentElement.offsetHeight。
第一组数据：
<body style="border:1px solid;height:100px;padding-top:10px;margin-top:50px;">
<div style="height:1000px; width:800px;"></div>
</body>
window.screen.height:768
window.outerHeight:734
window.innerHeight:619
body scrollHeight:1061
body offsetHeight:112
body clientHeight:110
documentElment scrollHeight:1061
documentElment offsetHeight:162
documentElment clientHeight:619
第二组数据：
<body style="border:1px solid; height:100px;padding:10px;margin:50px;">
<div style="height:1000px; width:800px;"></div>
</body>
window.screen.height:768
window.outerHeight:734
window.innerHeight:619
body scrollHeight:1061
body offsetHeight:122
body clientHeight:120
documentElment scrollHeight:1061
documentElment offsetHeight:222
documentElment clientHeight:619
第三组数据:
<body style="border:1px solid; height:1000px;padding-top:10px;margin-top:50px;">
<div style="height:100px; width:800px;"></div>
</body>
window.screen.height:768
window.outerHeight:734
window.innerHeight:619
body scrollHeight:1062
body offsetHeight:1012
body clientHeight:1010
documentElment scrollHeight:1062
documentElment offsetHeight:1062
documentElment clientHeight:619
3、IE11
body
clientHeight= body.padding + body.height(css设置或内容撑大,设置优先)
offsetHeight = body.padding + body.height(css设置或内容撑大,设置优先)+ body.border
scrollHeight =body.padding + body.height(css设置或内容撑大,谁大谁优先)，但最小值是clientHeight。
documentElement
clientHeight =window.innerHeight-scrollbar.height
offsetHeight = body.padding + body.height(css设置或内容撑大,设置优先)+ body.border+body.margin
scrollHeight=body.padding + body.height(css设置或内容撑大,谁大谁优先)+ body.border+body.margin，但最小值是body.offsetHeight+ margin。
第一组数据：
<body style="border:1px solid;height:100px;padding-top:10px;margin-top:50px;">
<div style="height:1000px; width:800px;"></div>
</body>
window.screen.height:614
window.outerHeight:448
window.innerHeight:364
body scrollHeight:1010
body offsetHeight:112
body clientHeight:110
documentElment scrollHeight:1061
documentElment offsetHeight:162
documentElment clientHeight:347
第二组数据：
<body style="border:1px solid; height:100px;padding:10px;margin:50px;">
<div style="height:1000px; width:800px;"></div>
</body>
window.screen.height:614
window.outerHeight:448
window.innerHeight:364
body scrollHeight:1010
body offsetHeight:122
body clientHeight:120
documentElment scrollHeight:1061
documentElment offsetHeight:222
documentElment clientHeight:347
第三组数据：
<body style="border:1px solid; height:1000px;padding-top:10px;margin-top:50px;">
<div style="height:100px; width:800px;"></div>
</body>
window.screen.height:614
window.outerHeight:448
window.innerHeight:364
body scrollHeight:1010
body offsetHeight:1012
body clientHeight:1010
documentElment scrollHeight:1062
documentElment offsetHeight:1062
documentElment clientHeight:347
主流浏览器下下offsetHeight\clientHeight\scrollHeight以及window的innerHeight\outHeight等的关系
标签：style color ar strong 数据 sp div c on
原文地址：http://blog.csdn.net/zerountao/article/details/39723567
