用 jQuery 取得 HTML 文件高度（Document）與瀏覽器視窗高度（Viewport）

文件高度（Document Height）指的是整篇 HTML 的高度，若少於瀏覽器 Viewport 高度則不會出現 Scrollbar，反之則會。

Document Height 是用 Javascript 提供的 document 物件來取得。

var h = $(document).height();

視窗高度（Viewport Height）指的是瀏覽器用來顯示 HTML 的高度。


Viewport Height 是用 Javascript 提供的 window 物件來取得。

var h = $(window).height();

再與 body 高度做比較

nclog('d: ' + $(document).height());
nclog('w: ' + $(window).height());
nclog('b: ' + $('body').height());

在 Firefox 13.0.1 可以得到

d: 518
w: 369
b: 502

有趣的發現是 document 與 body 有些微的差異，用 Firebug 去看看，發現 body 預設有 margin，為 body 加上 margin: 0 再試一次

d: 502
w: 369
b: 502

居然是 document 高度減少了，而不是 body 高度增加，原因請看 用 jQuery 取得 Div 的寬度與高度（Width, Padding, Border, Margin）。