最近觉得js中的各种宽度高度的很多，有点混乱，在这里做一个小小的总结。
- 理清window和document的区别
- 理清各种宽高度的细节区别以及一些小的应用
- window的宽高读
- document/Element下的宽高度。
思维导图.png
整个窗口大小
innerHeight 和 outerHeight
innerHeight /innerWidth：是浏览器视口的大小，包括滚动条
outerHeight /outerHeight： 是整个浏览器窗口的大小，包括窗口的标题 工具栏和 状态栏等。
innerHeight和outerHeight的区别.png
从 Firefox 4 到 Firefox 24，该属性有 bug，而且某种情况下，会在页面加载前给出一个错误的值
clinetHeight和clientWidth
image.png
当然不是所有的浏览器都支持window的innerHeight的，所以就有了这个属性。
先看下面的这段代码：
前面提到window下的document和其他的body都是有clientWidth的这个属性的，所以可以通过设置这个来实现window.innerHeight的属性。
document.documentElement.clientHeight
document.body.clientHeight
documentElement是文档的根元素，也就是html了。所以这也是html的宽度。
而body则是documentElement下的子元素。
- documentElement.ClientHeight 不包括整个文档的滚动条，也不包括html元素的边框。
- body.clientHeight 不包括整个文档的滚动条，也不包括html元素的边框和body元素的边框和滚动条。
最佳实践
为了兼容浏览器的问题，可以使用以下代码实现。
当然，下面获取的宽度高度还是有所区别的，区别就在于一些边框和滚动条的宽度和高度有没有获取进。
var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
实际应用
那么，问题来了。
如何用当前浏览器窗口的高度去实现页面中元素的高度的自适应。
现在有一个这样的应用场景。
一个页面中，有头部，内容块，还有固定的底部。中间的内容块根据不同浏览器窗口而自适应，撑满整个屏幕的高度。那么这个高度如何获取呢？
var totalHeight = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight // 这是当前浏览器的高度
var height = totalHeight - 头部的高度 - 底部的高度。 // 这个就是中间的内容区域的高度
// 当然，我们可以封装成一个函数。
function setHeight () {
var totalHeight = window.innerHeight ||document.documentElement.clientHeight|| document.body.clientHeight // 这是当前浏览器的高度
var height = totalHeight - 头部的高度 - 底部的高度。 // 这个就是中间的内容区域的高度
document.querySelectorAll('.container')[0].style.height = height
}
// 当然，当我们去调整浏览器大小宽高的时候，需要重新设置内容区域的宽高。可以监听window的resize事件
window.addEventListener('resize', (e) => {
setHeight()
})
offsetHeight和offsetWidth
包括元素的padding和border的值。
image.png
scrollHeight 和scrollWidth
可以获取滚动元素的宽度和高度
经常是要结合scrollTop和scrollWidth来使用的，可以获取某个元素被滚动到父元素的哪个位置，也可以监听到元素是否到达底部或者顶部。
image.png
scrollTop
image.png
所以根据这一点，也可以判断当什么时候，元素滑动到了容器的底部。
也就是当满足以下条件的时候。
element.scrollHeight - element.scrollTop === element.clientheight
如下图所示：
所以当页面滚动到底部的时候，就满足以下图所示的条件。
这个可以用于判断是否可以阅读完文档。
image.png
欢迎互相分享。最近感觉学习前端到了一个瓶颈期了，好像一直都没有什么进步。
参考链接：
http://www.ruanyifeng.com/blog/2009/09/find_element_s_position_using_javascript.html
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTop
网友评论