jQuery获取文档高度与窗口高度详解及常见问题

jQuery高度获取方法汇总

jQuery中获取窗口高度和文档高度的核心方法包括$(document).height()与$(window).height()。

1. $(document).height()用于获取整个网页文档的总高度。
2. $(window).height()用于获取浏览器可视窗口的高度。
3. $(window).scrollTop()表示浏览器可视窗口顶端距离网页文档顶部的垂直偏移量。
4. $(document.body).height()获取浏览器当前窗口中文档body部分的高度。
5. $(document.body).outerHeight(true)获取浏览器当前窗口中文档body的总高度，包含边框、内边距和外边距。
6. $(window).width()获取浏览器当前窗口可视区域的宽度。
7. $(document).width()获取浏览器当前窗口中文档对象的总宽度。
8. $(document.body).width()获取浏览器当前窗口中文档body部分的宽度。
9. $(document.body).outerWidth(true)获取浏览器当前窗口中文档body的总宽度，包含边框、内边距和外边距。

高度计算关系与注意事项

当网页滚动条拉至最低端时，满足关系式：$(document).height() == $(window).height() + $(window).scrollTop()。

当网页实际高度不足浏览器窗口高度时，$(document).height()的返回值等同于$(window).height()。

不推荐方法及故障排查

不建议使用$("html").height()和$("body").height()来获取高度。

原因分析如下：

$("body").height()可能因body存在边框，导致获取的高度值小于$(document).height()。

$("html").height()在不同浏览器中获取的高度含义存在差异，主要问题在于浏览器兼容性不一致。

若$(window).height()返回值异常，未正确反映浏览器窗口高度，通常由以下原因导致。

网页代码中未添加<!DOCTYPE>声明，导致浏览器处于怪异模式，影响高度计算。

实际应用示例

掌握js获取页面高度和窗口高度的原理后，可进行实际应用。

实际应用场景包括：动态设置内容区域的合适高度，以适应不同屏幕尺寸。

//设置内容区域合适高度
  var docH = $(document).height(),
    winH = $(window).height(),
    headerH = $(".header").outerHeight();
    footerH = $(".footer").outerHeight();
  if(docH<=winH+4){
    $("div.container").height(winH-headerH-footerH-50);
  }