64

I am having problem of getting wrong height with

$(window).height();

and got the similar question here

In my case when I try

$(document).height();

it seems to return me correct result

window height returns 320

while document height returns 3552!

I found this question too

But in my case window already gets loaded completely as I am calling height function after few ajax operations

So what is the best way to know the height of the current window?

Edit:

enter image description here enter image description here

14
  • 3
    Those are two entirely different things. Are you trying to get the height of the window, document, viewport, what?
    – Brad
    Commented Dec 26, 2012 at 3:53
  • $(window).height(); is the correct way to get the height of the window. Why do you think it is wrong? Commented Dec 26, 2012 at 3:57
  • 1
    @Brad- Actually I want the full height my window covers including scrolling region, actually I want to use this numbers to calculate and set bottom of my popup Commented Dec 26, 2012 at 3:57
  • 1
    So you want your popup off screen?
    – PeeHaa
    Commented Dec 26, 2012 at 3:57
  • @FelixKling - It returns me 320, but I don't think the size of my window is 320 as I am calculating one of the table's height on the page and that table is alone of 2400px! Commented Dec 26, 2012 at 3:58

6 Answers 6

129

Well you seem to have mistaken them both for what they do.

$(window).height() gets you an unit-less pixel value of the height of the (browser) window aka viewport. With respect to the web browsers the viewport here is visible portion of the canvas(which often is smaller than the document being rendered).

$(document).height() returns an unit-less pixel value of the height of the document being rendered. However, if the actual document’s body height is less than the viewport height then it will return the viewport height instead.

Hope that clears things a little.

7
  • 2
    What if one wants to obtain the height of the document, especially if it's less than the viewport (e.g. in order for an iframe to tell its parent what size it is supposed to be)? is $("html").height() reliable across browsers?
    – jacobq
    Commented May 24, 2013 at 15:12
  • 1
    I personally never use $(html).height() and would thus suggest to use $(document).height() for getting the height of the document.
    – Sayan
    Commented May 27, 2013 at 8:01
  • 4
    The problem is that if the window height is greater than the document height then $(document).height() returns the window/viewport height, not the document height. In my use case, an iframe may grow taller or shorter and needs to be able to tell its parent what height it should be. If it's tall and then gets shorter, it needs to be able to measure a height smaller than its viewport.
    – jacobq
    Commented May 28, 2013 at 13:20
  • How do u explain that $(window).height() return a hug value like 33 millions pixes ?
    – M.Abulsoud
    Commented Dec 11, 2018 at 12:56
  • 1
    @Noldorin What I was trying to articulate (unsuccessfully?) was that the value returned by both the utilities are numeric only and do not contain the unit which is in pixels. Interestingly, pixel is not a unit in true sense of the word.
    – Sayan
    Commented Apr 23, 2019 at 15:28
10

This fixed me

var width = window.innerWidth;
var height = window.innerHeight;
4

AFAIK $(window).height(); returns the height of your window and $(document).height(); returns the height of your document

2
  • 8
    tautology. $(window).height() is just the computer javascript language for "return me the height of window". You just said that line of code in human language. I didn't downvote though, because I don't believe it. Commented Jun 11, 2015 at 7:51
  • Their names are already writen in functions and you just named them same. However, its better to explain what window and document are.
    – Akin Zeman
    Commented Nov 21, 2021 at 10:22
3

jQuery $(window).height(); or $(window).width(); is only work perfectly when your html page doctype is html

<!DOCTYPE html>
<html lang="en">
...
2
  • Solved my problem on Firefox - in ver. 88 at least, $(window).height() returns height of the body if <!DOCTYPE html> isn't set. Commented May 24, 2021 at 20:53
  • Thanks! In my case there was inline CSS styles being output at the top of the page before <!doctype html> and I guess that made Chrome ignore the doctype.
    – Gavin
    Commented May 19, 2022 at 12:56
0

you need know what it is mean about document and window.

  1. The window object represents an open window in a browser.click here
  2. The Document object is the root of a document tree.click here
0

$(document).height:if your device height was bigger. Your page has Not any scroll;

$(document).height: assume you have not scroll and return this height;

$(window).height: return your page height on your device.

Your Answer

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

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