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

javascript jquery window height

33,835

Solution 1

Look at your HTML souce code. The first line should be <!DOCTYPE html> and you have <style> tag instead.

So it seems that your document is running in Quirks Mode and jQuery can't calculate correct window dimensions.

Solution 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.

Solution 3

//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');
    }

});

Solution 4

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%.

View more solutions

33,835

Author by

Joel Joel Binks

PHP/MySQL/Node/JS/JQuery/HTML/CSS/Java/Python

Updated on July 20, 2022

Comments

Joel Joel Binks almost 2 years
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 used this function before and have never seen it fail, but for some reason it will return the same value as the document height. I have the test page here: bangstyle.com/test-images

I have coded the alert to display at page load, and also whenever the user scrolls 500px below the top:
```
function scroller() {

                        if($(window).scrollTop() > 500){

                        delay(function(){ //200ms wait
                                pagecounter++;
                                sideshow();
                                alert("window height: " + $(window).height() + " scrolltop: " + $(window).scrollTop() + " document height: " + $(document).height());

                                return false;
                            }, 200 );

                                    }
                            }
```
I tried posting this before but I deleted it as I didn't get a solution. I hope it is ok to post a link to my test page. BTW I have tested this on Mac Safari and Mac FF. I have run this same code on other pages and it works fine. I feel there must be something in the dom of this page that causes JS to fail, but no idea what that would be.