【HTML/CSS】主流浏览器下下offsetHeight\clientHeight\scrollHeight以及window的innerHeight\outerHeight等的关系

本文链接：https://blog.csdn.net/zerountao/article/details/39723567

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>

第一组数据

结果为：

window.screen.height:614
window.outerHeight:460
window.innerHeight:336
body scrollHeight:1010
body offsetHeight:112
body clientHeight:110
documentElment scrollHeight:1061
documentElment offsetHeight:162
documentElment clientHeight:319

第二组数据：

结果为：

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

第三组数据：

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。

第一组数据：

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

第二组数据：

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

第三组数据:

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。

第一组数据：

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

第二组数据：

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

第三组数据：

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