106

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());
kqw
  • 17,649
  • 11
  • 61
  • 92
Fraser
  • 12,986
  • 22
  • 69
  • 113

5 Answers5

249

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.

Tom Hubbard
  • 15,014
  • 13
  • 56
  • 82
  • 11
    FireFox also does this reporting unless you use a strict doctype like – Tom Chiverton Nov 29 '12 at 10:46
  • also, incorrect doctype makes twitter bootstrap scrollspy to act weirdly for same reason that $(window).height() returns document height. – nidheeshdas Oct 17 '13 at 04: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 06 '14 at 13:27
  • A 'modal' dialog box was displayed in the wrong position, little would I know it was caused by a backslash character that got placed accidentally before the doctype declaration. Thank you for this post. – Tentux Mar 06 '14 at 16:02
  • You have no idea what you have done for me. I had spent 8 hours on problems related to this. In my case, I had a script tag before the DOCTYPE, and Chrome was doing all kinds of weird stuff. Thank you so much. – Benno Jun 01 '15 at 03:54
  • That's something you either know or you just don't, like me before. Thanks for that! Favorited right away! – D4V1D Jul 31 '15 at 16:47
  • Yes! Just happened to me too - a UTF8 BOM got added to my php file, Chrome interpreted this as non-blank line, and indeed my doctype got ignored and my pop-ups were mis-centered. You rock! – Jonathan Aug 13 '15 at 18:37
  • 1
    i have same problem but doctype is declared correctly :( – bia.migueis Sep 14 '15 at 22:40
  • I have this problem and same as @bia.migueis my doctype is configured correctly. I use the same base template for all projects, yet I can't get window.height in just 1 project... – nclsvh Jul 26 '16 at 09:52
  • @bia.migueis did You tried write doctype uppercase? doctype = incorrect, DOCTYPE = correct – instead Feb 25 '17 at 22:46
  • @instead like I said before doctype is declared correctly – bia.migueis Apr 19 '17 at 00:40
  • @bia.migueis The doctype declaration has to be the *very* first thing on the page, not just the first thing rendered - so you can't have any php before it, for example, which is what was causing me an issue. – Sinister Beard Jul 07 '17 at 11:33
  • 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 08 '18 at 03:03
  • @Sablefoste Good point. Someone had added that later. I updated it to make it more accurate. – Tom Hubbard Jan 08 '18 at 13:03
  • This can still occur even if the doctype declaration appears valid. In our case the issue was being caused by serverside processing/rewriting of the HTML file. The doctype (and HTML in general) looked fine in both the page source and the DOM inspector, but once the serverside HTML re-writing was removed, the issue disappeared. We never did find out exactly what the problem was, but clearly this can be caused by the HTML being invalid in ways that aren't obvious. – James Hill Feb 14 '18 at 15:56
25

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

var w = window.innerWidth;
var h = window.innerHeight;
Eduardo
  • 431
  • 5
  • 4
  • 1
    so weird, I am using proper doctype aswell. your innerheight fixed my problem! Thanks – Martijn van Hoof Apr 28 '16 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;` – melanie johnson Mar 03 '17 at 19:28
  • really fixing the problem (and yes I have a doctype - first thing on each page) – hillcode Apr 28 '19 at 14:26
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.

Xmindz
  • 1,232
  • 13
  • 33
1

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.

Community
  • 1
  • 1
Solomon Closson
  • 5,592
  • 10
  • 54
  • 106
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>

Shinjo
  • 621
  • 4
  • 22
Gourav Yadav
  • 79
  • 1
  • 1
  • 6