jQuery window height is not correct

jquery window height same as document height

I was working on a small jQuery snippet and got this weird issue. I was trying to get window height using jquery’s $(window).height() function.

Ideally $(window).height() returns the pixel less height of browser window. This is always the height of current browser window. If you resize browser this value should change.

Also you can get $(document).height(). $(document).height() returns an unit-less pixel value of the height of the document being rendered. If the actual document’s body height is less than the viewport height then it will return the viewport height instead. i.e. if you have less content in a page and window is sufficiently open to show this content then document height will be less than jquery window height.

Problem

However recently when I was playing with these values it seems both $(window).height() and $(document).height() gave me same value! Thus the $(window).height() was giving incorrect result.

Check out below source:

<html> <head> <script type='text/javascript' src='http://code.jquery.com/jquery-1.10.1.js'></script> <script type='text/javascript'> $(document).ready(function(){ $('#winheight').text($(window).height()); $('#docheight').text($(document).height()); }); </script> </head> <body> <div id="console"> $(window).height() = <span id="winheight"></span> <br/> $(document).height() = <span id="docheight"></span> </div> <p>Lorem ipsum dolor sit amet, ... </body> </html>
Code language: HTML, XML (xml)

Output:

What! The output shows value of $(window).height() and $(document).height() same 750. The window height is not equal. It should be 200px. Clearly we can see document is bigger, there is a scroll bar right there.

So why JQuery gives same value for window and document height? We’ll it turns out we missed a simple thing.

Solution

Our HTML document doesn’t have DOCTYPE declaration. So it’s not a valid HTML so to speak. JQuery cannot calculate window height / document height correctly if doctype is not specified on window.

The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.

So lets add DOCTYPE declaration to our HTML page and see the output.

<!DOCTYPE HTML> <html> //.. </html>
Code language: HTML, XML (xml)

Output:

Voila! It worked.. Never forget DOCTYPE declaration in your HTML. Always try to create HTML files using some kind of IDE. That will automatically take care of this.

Get our Articles via Email. Enter your email address.

You may also like...

36 Comments

  1. Aziz Ali says:

    Hey Viral,

    I was writing a small piece of code and I was facing he same trouble.
    window.innerHTML was giving the right value but $(window).height() was giving the document’s height.

    Your blog helped me figure it out :)

    BTW for virappatel.net blog readers. window.innerHTML: innerHTML is a property of the window object, natively available in all browsers. $(window).height() is ofcourse jquery pulling the same value.

  2. venkat says:

    Thank you sir,

  3. Smoerrebroed says:

    I still can’t believe it’s really that easy.
    You saved me a lot of time.
    Thanks

  4. mikbert says:

    This was driving me insane, as I would get the event for resize but the value for height was clearly wrong. Thank you!

  5. Ed Chang says:

    Thanks so much! Found this page through Google, and it fixed the bug I couldn’t solve.

  6. John Ventimiglia says:

    Did not work for me. Already had a DOCTYPE. Then I noticed I had output BEFORE the DOCTYPE.
    So seems FF but not IE need to have DOCTYPE BEFORE all else.
    That was driving me nuts because some of my pages worked, others did not.

    Thanks.

  7. S says:

    Works.

  8. Ayrton says:

    Thank you very much, this was exactly my problem! I was searching around for hours and nothing seemed to work until I found your solution! Great post!

  9. Dimas says:

    Thank you, your simple solution save me from my half day headache. Great post.

  10. Wadim Grasza says:

    OMG! This saved me so much time. Thanks for writing this.

  11. Atott says:

    Thanks for your solution!

  12. H1ac0k says:

    It works, thanks a lot…

  13. awesome! says:

    i dont usually leave commets on sites, but here i have to say that this saved me.

    Thank you!

  14. Steve says:

    Thank you, you saved me a lot of headache!

  15. Alex says:

    Thanks. You saved me a lot of debugging time!

  16. Maulik says:

    Thanks!

  17. avi says:

    Thanks

  18. Marcel says:

    Thanks!

  19. Fabian says:

    Hey,
    thank you for this info, saved my day!

  20. Mark B says:

    Thanks for this. I was pulling my hair out trying to figure out what was wrong.

  21. marcos says:

    perfecto!

  22. Chris says:

    Thank you so much for this! This really tripped me up.

  23. sudhir j says:

    Thanks very much dude.. Awesome solution.

  24. mark says:

    Not workeo… if it only was that simple.

  25. rjack says:

    Thank you so much! I was going crazy trying to figure out why on one page my lightbox2 was working but not on another.

    THANKS!

  26. BoatKung says:

    OH MY GOSH!!
    I try to fixed this problem around 2 – 3 days on my project. So hopeless..
    and then your blog appear on my Google result!!

    Thank you very much!

  27. Trim says:

    You’re the man :D Thanks it worked.

  28. Zoltan says:

    Sooo simple, can’t believe it, a BIG thank you!

  29. Mike says:

    I would say that this is bug of jQuery because BROWSER window size must have nothing to do with document (content) version.

  30. nadeem says:

    Great sir … Thanks

  31. nadeem says:

    Amazing sir ..

  32. nadeem says:

    Great sir

  33. nadeem says:

    Amazing sir

  34. animakuz says:

    Woow I could not believe it then I checked my document and I had DOCTYPE mispellt *facepalm*. Thank you soo very mucch!!

  35. Garima Jain says:

    Yeah, Thank you so much for this article. It helps me for the window height issue on firefox.
    Seriously very helpful.

  36. JayLoui says:

    Thx for saving my ass LOL

Leave a Reply

Your email address will not be published. Required fields are marked *