Jquery $(window).height() function does not return actual window height

Question

I have a page that I need to dynamically load ajax content when the user scrolls to the bottom. The problem is that JQuery is not returning the correct window height. I have

Answer 1

//works in chrome
$(window).bind('scroll', function(ev){

    //get the viewport height. i.e. this is the viewable browser window height
    var clientHeight = document.body.clientHeight,
        //height of the window/document. $(window).height() and $(document).height() also return this value.
        windowHeight = $(this).outerHeight(),
        //current top position of the window scroll. Seems this *only* works when bound inside of a scoll event.
        scrollY = $(this).scrollTop();

    if( windowHeight - clientHeight === scrollY ){
        console.log('bottom');
    }

});

Answer 2

I had the same problem. I've found some things:

1) the problem happens when you try to get the actual height before document is completed rendered; 2) the problem happens in google chrome when you does not use corret DOCTYPE (mentioned above) 3) it always happens in google chrome even after the document is rendered completly.

For google chrome, I've found a workaround here: get-document-height-cross-browser I'm using this solution only for google chrome and it resolved my problem, I expect helps someone that still have the problem.

Answer 3

This is an old question but I recently struggled with not getting the correct window height in IE10 by a few pixels.

I discovered that IE10 applies a 75% zoom by default and that screws the window and document measurements.

So, if you're getting wrong width or height, make sure zoom is set to 100%.

Answer 4

I moved my scripts from to footer and that resolved it for me.

Answer 5

Since jquery (and dom in general) is not calculating sizes correctly in quirksmode, two solutions:

1. Add doctype html at the top of your page (like mentioned in "correct" answer), or
2. Use window.innerHeight, window.innerWidth if first option is not an option.

Hope it helps.

Answer 6

Did some looking around and stumbled upon this, don't know if it helps but it's worth bringing up.

why is $(window).height() so wrong?