結論：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>
