jQuery中的方法
$(document).height();//整个网页的高度
$(window).height();//浏览器可视窗口的高度
$(window).scrollTop();//浏览器可视窗口顶端距离网页顶端的高度（垂直偏移）
在上面这三个方法中，我们可以得到一个公式，当页面中的滚动条拉到最低点时：
$(document).height() == $(window).height() + $(window).scrollTop()
~~~
版权声明：本文为CSDN博主「旗smile」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u014346301/article/details/52314574
获取网页高度
————————————————
版权声明：本文为CSDN博主「旗smile」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u014346301/article/details/52314574
~~~
从上面的例子中可以看出，当滚动条在网上最上面的时候，$(window).scrollTop()的值是0，它是一直变动的，当浏览器的大小被调整时，$(window).height()也将跟着变化，只有$(document).height()的值是始终不变的（如果是自适应网页调整浏览器大小时页面调整会导致页面高度改变）。
而且只有当滚动条在最底部时：$(document).height() == $(window).height() + $(window).scrollTop()这个等式才会成立。
下面在来做一个调整，将上面的那个例子中class="d1"的div的高度改为120px，这时整个网页的高度（也就是$(document).height()）肯定是没有浏览器高的
————————————————
但是得到的结果显示网页的高度和浏览器的高度是一样的，所以我们可以得到一个结论，当网页的高度没有浏览器的高度高是，$(document).height()返回的结果与$(window).height()相同。
可以再验证一下上面这个结果，我么来调整一下浏览器的高度再来看效果：
————————————————
调整高度以后可以看到网页的高度（$(document).height()）还是和浏览器的高度（$(window).height()）相等，所以我们得到的结论是正确的：
当网页高度不足浏览器高度时，$(document).height()返回的是$(window).height()的值。
要得到网页的高度，最好不要使用$("body").height()和$("html").height()。
先来说$("body").height()，因为body是可以有padding、border、margin这几个属性的，如有设置了这几个属性，那么获取的网页高度就会比原本的网页高度小。再来说$("html").height()，在不同浏览器上获取的高度会略有不同，说白了就是浏览器存在兼容问题。
说到border和padding、margin，就要说到jQuery中的另外两个方法，innerHeight()和outerHeight(),这两个方法主要用于获取标签的高度，对window和document可以使用height()代替。
hieght() //获取的是元素内容的高度 content
innerHeight() //获取的是元素内容高度加上内边距 content + padding
outerHeight() //获取的是元素内容高度加上内边距和边框 content + padding + border
outerHeight(true) //获取的是内容高度加上内边距、边框、外边距 content + padding + border + mar
1
2
3
4
innerHeight()
为匹配的元素集合中获取第一个元素的当前计算高度值,包括padding，但是不包括border。
outerHeight( [includeMargin ] )
获取元素集合中第一个元素的当前计算高度值,包括padding，border和选择性的margin。返回一个整数（不包含“px”）表示的值 ，或如果在一个空集合上调用该方法，则会返回 null。
在.outerHeight()计算中总是包含padding-top ,padding-bottom 和 border-top，border-bottom ；如果includeMargin参数是true，那么margin (top 和 bottom)也会被包含。
JavaScript中的各种高度
在JavaScript中定义的各种高度和宽度都是各个对象的属性，下面我直接列出来，有兴趣的可以自己直接写在js里面测试一下就可以了。
document.body.clientHeight 网页可见区域高度（紧针对body，与$("body").height()的值相同）
document.body.offsetHeight 网页可见区域高度（仅针对body，包括滚动条和边框，若滚动条和边框为0，则和clientHeight相等）
window.innerHeight 可视窗口的高度（与$(window).height()的值相同） //IE9+、Chrome、Firefox、Opera 以及 Safari
document.body.scrollHeight 网页正文全高（与$(document).height()的值相同）
document.body.scrollTop 网页中被卷去的高度（当前页面顶部与整个网页定的距离）
window.screen.heitgh 整个屏幕的高度
window.screen.availHeight 屏幕可用工作区域的高度
window.outerHeight 整个浏览器的高度
//宽度与高度相同，只需要将height改为width即可