113

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()); 
2
  • what is the browser are you working on ? Aug 24, 2012 at 4:44
  • This problem started to appear with jquery-1.8.0, older versions of jquery did this correctly (even without the DOCTYPE set)
    – ralhei
    Nov 18, 2015 at 13:59

5 Answers 5

256

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.

15
  • 11
    FireFox also does this reporting unless you use a strict doctype like <!DOCTYPE HTML> Nov 29, 2012 at 10:46
  • also, incorrect doctype makes twitter bootstrap scrollspy to act weirdly for same reason that $(window).height() returns document height. Oct 17, 2013 at 4:07
  • 3
    In my case, I had a Response.Write in my code behind on an ASP site which was outputting a 1 before any HTML. So my doc type was right, but wasn't the first thing on the page, technically.
    – James
    Mar 6, 2014 at 13:27
  • 1
    i have same problem but doctype is declared correctly :( Sep 14, 2015 at 22:40
  • 1
    "The doctype tag must be the very first thing in your document. E.g., you can't have any php code before it, even if it doesn't render anything." How can this possibly be? The browser doesn't know what the server is running, it only receives a text file with HTML markup. What if you are running IIS and not Apache? The browser doesn't care what the server is doing.
    – Sablefoste
    Jan 8, 2018 at 3:03
25

I had the same problem, and using this solved it.

var w = window.innerWidth;
var h = window.innerHeight;
3
  • 1
    so weird, I am using proper doctype aswell. your innerheight fixed my problem! Thanks Apr 28, 2016 at 11:03
  • 1
    Same problem - had valid doctype and all. Slightly more cross-platform: var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; Mar 3, 2017 at 19:28
  • really fixing the problem (and yes I have a doctype - first thing on each page)
    – hillcode
    Apr 28, 2019 at 14:26
2

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.

1

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.

1
  • The document extends below the bottom of the window in every page.
    – Fraser
    Aug 24, 2012 at 4:50
0

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>

1
  • use this tag on top of your web page: <!DOCTYPE html> Sep 19, 2017 at 6:32

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.