I'm sure there is a simple error I'm making, but I am simply alerting $(window).height() and it returns the same value as $(document).height().
I am on a 13" MBA and my window height of my browsers when maximised between 780px - 820px (roughly) but each time it returns a window height identical to that of document height. In every case on the site I am working on it is over 1000px.
What is going on here?
alert($(window).height());
alert($(document).height());
This question is related to
jquery
With no doctype tag, Chrome reports the same value for both calls.
Adding a strict doctype like <!DOCTYPE html> causes the values to work as advertised.
The doctype tag must be the very first thing in your document. E.g., you can't have any text before it, even if it doesn't render anything.
I had the same problem, and using this solved it.
var w = window.innerWidth;
var h = window.innerHeight;
Here's a question and answer for this: Difference between screen.availHeight and window.height()
Has pics too, so you can actually see the differences. Hope this helps.
Basically, $(window).height() give you the maximum height inside of the browser window (viewport), and$(document).height() gives you the height of the document inside of the browser. Most of the time, they will be exactly the same, even with scrollbars.
I think your document must be having enough space in the window to display its contents. That means there is no need to scroll down to see any more part of the document. In that case, document height would be equal to the window height.
Its really working if we use Doctype on our web page jquery(window) will return the viewport height else it will return the complete document height.
Define the following tag on the top of your web page:
<!DOCTYPE html>
Source: Stackoverflow.com