As shown in the following figure. How do I get the height?
var viewportheight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
I was using $('html').height() of jQuery but it didn't work. Strange.
That would be trying to get the height of the content of the HTML tag rather than the height of the browser viewport.
But in XHTML, isn't the documentElement always the <html> element?
The height of the page is completely different from the height of the browser viewport. The height of the browser viewport is the same regardless of whether a page is 10 pixels or 10 million pixels long. A short page will have a blank space at the bottom of the viewport. A long page will either have a scrollbar to allow the page to scroll or will have whatever doesn't fit the viewport inaccessible.
documentElement.clientHeight only supplies the viewport height in IE when a strict doctype is used.
Iin XHTML the viewport height is always supplied by window.innerHeight and the other two alternatives are not needed (as they are only used by IE which doesn't support XHTML).
In jQuery it's $(window).height()