jquery获取文档高度和窗口高度汇总

深入理解jQuery获取页面及元素高度、宽度的方法

在网页开发中，我们经常需要获取页面或元素的高度和宽度。jQuery为我们提供了便捷的方法来实现这一需求。以下是一些常用的方法：

1. 获取整个网页的文档高度：$(document).height()

2. 获取浏览器可视窗口的高度：$(window).height()

3. 获取浏览器可视窗口顶端距离网页顶端的高度（垂直偏移）：$(window).scrollTop()

4. 获取浏览器当前窗口文档body的高度：$(document.body).height()

5. 获取浏览器当前窗口文档body的总高度（包括border，padding，margin）：$(document.body).outerHeight(true)

6. 获取浏览器当前窗口可视区域宽度：$(window).width()

7. 获取浏览器当前窗口文档对象宽度：$(document).width()

8. 获取浏览器当前窗口文档body的宽度：$(document.body).width()

9. 获取浏览器当前窗口文档body的总宽度（包括border，padding，margin）：$(document.body).outerWidth(true)

值得注意的是，当网页滚动条拉到最低端时，整个网页的文档高度等于浏览器可视窗口的高度加上滚动偏移量。而当网页高度不足浏览器窗口时，文档的高度就是浏览器窗口的高度。

在实际应用中，我们可以使用这些方法为内容区域设置合适的高度。例如，先获取文档高度、窗口高度、页眉和页脚的高度，然后根据这些值来设置内容区域的高度。这样，我们可以确保内容区域在任何情况下都有合适的高度，不会因为内容过多而出现滚动条，也不会因为内容过少而留下过多的空白。

关于使用$("body").height()和$("html").height()的问题，由于body可能会有边框，获取的高度会比$(document).height()小；而在不同的浏览器上，$("html").height()获取的高度的意义可能会有差异，因此不推荐使用这两种方法获取高度。至于$(window).height()返回的值有问题的情况，很可能是因为网页没有加上声明。为了确保代码的正确性和兼容性，我们应优先选择使用$(document).height()和$(window).height()等方法来获取页面和元素的高度、宽度。以下是设置内容区域合适高度的示例代码：

var docH = $(document).height(), // 获取文档高度

winH = $(window).height(), // 获取窗口高度

headerH = $(".header").outerHeight(), // 获取页眉高度

footerH = $(".footer").outerHeight(); // 获取页脚高度

if (docH <= winH + 4) { // 如果文档高度小于等于窗口高度加4像素

$("div.container").height(winH - headerH - footerH - 50); // 设置内容区域高度为窗口高度减去页眉、页脚和一定的间隙值（例如50像素）

}