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

Community
  • 1
  • 1
Pawan Nogariya
  • 8,330
  • 12
  • 52
  • 105
  • 3
    Those are two entirely different things. Are you trying to get the height of the window, document, viewport, what? – Brad Dec 26 '12 at 03:53
  • `$(window).height();` is the correct way to get the height of the window. Why do you think it is wrong? – Felix Kling Dec 26 '12 at 03: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 – Pawan Nogariya Dec 26 '12 at 03:57
  • 1
    So you want your popup off screen? – PeeHaa Dec 26 '12 at 03: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! – Pawan Nogariya Dec 26 '12 at 03:58
  • There is a difference between the size of what's *visible* and the entire document. You are probably looking for the visible portion, as you wouldn't really want a popup to appear elsewhere. – JCOC611 Dec 26 '12 at 04:00
  • `Document height !== window height`! As @JCOC611 said, the window height is the part you **see** of the document, while the document height... is self explanatory. – Felix Kling Dec 26 '12 at 04:02
  • @JCOC611 - Exactly, actually I create a dynamic table that can have any number of rows and I can add any number of columns dynamically and on all those dynamically created columns click I show a popup, so I want to show the popup almost over the clicked cell, I achieved this yesterday but setting popup top but it has some issues with the popup left so I want to now set popup bottom for which I want to do something like this popupBottom = windoHeight - cellTop – Pawan Nogariya Dec 26 '12 at 04:04
  • @FelixKling - So window.height does not include scrollRegion? Because I am sure my window is not of 320 size only – Pawan Nogariya Dec 26 '12 at 04:05
  • Why don't you use `position:fixed` for the popup position? That way, the popup position wouldn't vary with the scroll position. – JCOC611 Dec 26 '12 at 04:06
  • Give me a moment, I'll try to post an image that may help me to explain my point – Pawan Nogariya Dec 26 '12 at 04:08
  • I have made the edit, see like first image I can select any number of teams and it will add columns to right for the team and on the second I can click on any of the cell and the popup will appear, you can see it is working perfectly as shown in the second screen. The only problem is I am using position relative, that is making my left wrong. This is the only problem due to which I am willing to shift to set the bottom of the popup – Pawan Nogariya Dec 26 '12 at 04:15
  • Ah! my problem can also be solved if I just get the way to set the top of the popup from the top of my window, currently if I use position:absolute it takes the top from the parent element but I want to set the top from the beginning of the window, is there a way? – Pawan Nogariya Dec 26 '12 at 04:17
  • My problem is solved playing with position of outer and inner elements :-) Thanks for all your help :) – Pawan Nogariya Dec 26 '12 at 04:42

6 Answers6

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.

Sayan
  • 2,053
  • 3
  • 25
  • 36
  • 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 May 24 '13 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 May 27 '13 at 08: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 May 28 '13 at 13:20
  • How do u explain that $(window).height() return a hug value like 33 millions pixes ? – M.Abulsoud Dec 11 '18 at 12:56
  • "unit-less pixel value"... huh? "pixels" is precisely a unit! – Noldorin Apr 16 '19 at 17:28
  • 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](https://superuser.com/questions/1103934/does-1-pixel-have-a-standard-size). – Sayan Apr 23 '19 at 15:28
  • Ah, I see what you mean now. Well, pixel is definitely a unit still, even according to the technical definition, but that's semantics... – Noldorin Apr 23 '19 at 16:49
10

This fixed me 

var width = window.innerWidth;
var height = window.innerHeight;
Ashraf Bin Akbar
  • 331
  • 4
  • 12
4

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

gamehelp16
  • 1,101
  • 1
  • 7
  • 22
  • 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. – Saeed Neamati Jun 11 '15 at 07: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 Nov 21 '21 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">
...
MRRaja
  • 1,073
  • 12
  • 25
  • Solved my problem on Firefox - in ver. 88 at least, $(window).height() returns height of the body if isn't set. – Błażej Czapp May 24 '21 at 20:53
  • Thanks! In my case there was inline CSS styles being output at the top of the page before and I guess that made Chrome ignore the doctype. – Gavin May 19 '22 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
zsytssk
  • 702
  • 1
  • 6
  • 14
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.

Yurets
  • 3,999
  • 17
  • 54
  • 74
YziaFromIran
  • 11