scrollHeight
Returns the total height of an element's contents, in pixels. The value contains the height with the padding, but does not include the scrollBar, border, and the margin.
clientHeight
Returns the height of the visible area for an object, in pixels. The value contains the height with the padding, but it does not include the scrollBar, border, and the margin.
offsetHeight
Returns the height of the visible area for an object, in pixels. The value contains the height with the padding, scrollBar, and the border, but does not include the margin.
One use case is to push page footer at the bottom by setting body content height dynamically based on current document height.
http://james.padolsey.com/javascript/get-document-height-cross-browser/ has the details, but the idea is to find the max value of these 3 heights from document.body and document.documentElement.
I use the jquery version from its comment section which is easier.
Math.max($(document).height(), $(window).height(), /* For opera: */ document.documentElement.clientHeight)
The corresponding scrollWidth, clientWidth, offsetWidth have similar concepts.
Later I found I also need reduce body height across SPA views, so I modified the codes to set min-height only when body height is less than window viewpoint height.
ReplyDeletevar view_height = (window.innerHeight || document.documentElement.clientHeight);
if (view_height > $(body).height()) {
$(body).css('min-height', view_height);
}