结论：offsetHeight比scrollHeight和clientHeight多了一个border和包括滚动条
未给aa加overflow:scroll
![]()
给aa加overflow:scroll
![]()
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="renderer" content="webkit">
<meta name="msapplication-tap-highlight" content="no" /><!-- winphone 点击无高光 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>演示例子</title>
</head>
<body style="overflow:scroll;">
<style>
*{margin:0;padding:0;}
.aa{width:100px;height:100px;padding:11px 50px 12px 10px;margin:6px;border:7px dashed #666;overflow:scroll;}
</style>
<div class="aa" id="aa">aa
<div id="bb" style="height:310px;background-color:#38f;color:#fff;">bb</div>
</div>
<script>
console.log('.aa{width:100px;height:100px;padding:10px 10px 20px 10px;margin:6px;border:7px solid #666;}')
console.log('【若有滚动条，值为减去滚动条的值】aa的clientWidth:width+pd*2:',document.getElementById('aa').clientWidth)
console.log('【若有滚动条，值为减去滚动条的值】aa的clientHeight:height+pd*2:',document.getElementById('aa').clientHeight)//如果有滚动条，那么得到的结果是height+pd*2-滚动条后的结果
console.log('【若有滚动条，值为减去滚动条的值】aa的scrollWidth::width+pd*2:',document.getElementById('aa').scrollWidth)
console.log('【若有滚动条，值为减去滚动条的值】aa的scrollHeight::height+pd*2:',document.getElementById('aa').scrollHeight)
console.log('aa的offsetWidth::width+pd*2+border*2::',document.getElementById('aa').offsetWidth)
console.log('aa的offsetHeight::width+pd*2+border*2::',document.getElementById('aa').offsetHeight)
console.warn('scrollHeight只有overflow明确指定hidden或scroll或auto时，才会把上下pd算进去，否则不写overflow的话,只计算pd-top,不计算pd-bottom')
console.warn('当没写overflow，且子元素height+pd*2+mg*2小于等于父元素，那么父元素的scrollHeight==父元素的clientHeight')
console.warn('当没写overflow，而子元素height+pd*2+mg*2大于父元素，那么父元素的scrollHeight==子元素的height+pd*2+mg*2+父元素的pdTop')
console.log('【若有滚动条，值为减去滚动条的值】document.documentElement.clientHeight:',document.documentElement.clientHeight)
console.log('【若有滚动条，值为减去滚动条的值】document.documentElement.clientWidth:',document.documentElement.clientWidth)
console.log('【若有滚动条，值为减去滚动条的值】document.body.clientWidth:',document.body.clientWidth)
console.log('【若有滚动条，值为减去滚动条的值】document.body.clientHeight:',document.body.clientHeight)
</script>
</body>
</html>
