注意 jQuery 的 $(window).height()、$(document).height()

作者:vkvi 来源:千一网络(原创) 日期:2017-1-20

在 jQuery + Chrome 中:

如果指定了 DOCTYPE,且网页内容高度 > 窗口可视区域高度

  • $(window).height() 表示窗口可视区域高度
  • $(document).height() 表示网页内容高度

如果指定了 DOCTYPE,且网页内容高度 < 窗口可视区域高度

  • $(window).height() 表示窗口可视区域高度
  • $(document).height() 表示窗口可视区域高度,因为这是它的最小值,所以尽管网页很短,但它没有再跟着网页继续变短。

如果没指定 DOCTYPE,且网页内容高度 > 窗口可视区域高度

  • $(window).height() 表示网页内容高度
  • $(document).height() 表示网页内容高度

如果没指定 DOCTYPE,且网页内容高度 < 窗口可视区域高度

  • $(window).height() 表示窗口可视区域高度,因为这是它的最小值,所以尽管网页很短,但它没有再跟着网页继续变短。
  • $(document).height() 表示窗口可视区域高度,因为这是它的最小值,所以尽管网页很短,但它没有再跟着网页继续变短。

总结一下

有点晕吧,其实这样来理解好理解些:

$(window).height() 有 DOCTYPE 表示窗口可视区域高度,无 DOCTYPE 表示网页内容的高度。

$(document).height() 总是表示网页内容高度。

不过,二者均有个最小值限制,即不会小于窗口可视区域高度。

相关阅读

相关文章
文章评论