Geek asks and answers

How to get the exact body height of a web browser window?

I want to get the exact height of the body of the webbrowser window. I tried innerHeight, clientHeight all the other solutions that I get when I search on Google. but not one of them gives the exact height. Should I adjust the height by subtracting some value from the height provided by these functions? How can I get rid of this problem? I think I missed something. please, help.

thank

+5
source share
3 answers

Some browsers report window heights incorrectly in different ways - especially mobile browsers that have a different viewport concept. Sometimes I use a function to check for several different values, returning whichever is the most. for instance

function documentHeight() {
    return Math.max(
        window.innerHeight,
        document.body.offsetHeight,
        document.documentElement.clientHeight
    );
}

Edit: I just looked at how jQuery works, and it really uses Math.max and a number of properties, however the list that it checks is slightly different from the ones shown in my example above, and since I usually trust the jQuery command to be better at this material than me; this is a jQuery solution other than jQuery (if that makes sense):

function documentHeight() {
    return Math.max(
        document.documentElement.clientHeight,
        document.body.scrollHeight,
        document.documentElement.scrollHeight,
        document.body.offsetHeight,
        document.documentElement.offsetHeight
    );
}
+13
source

You can use jquery to achieve this ...

$(document).ready(function(){
    browserWindowheight = $(window).height();
    alert(browserWindowheight);
});
+2
source

:

window.outerHeight (this is for IE9 and other modern browser height)

Internet Explorer

document.body.offsetHeight

, Internet Explorer ( , document.compatMode == 'CSS1Compat'):

document.documentElement.offsetHeight

. :

+1
source

More articles:


All Articles