5

I want to get exact height of the body of webbrowser window. I tried innerHeight, clientHeight all other solutions which I get while googling. but none of them give exact height. I had to adjust the height by subtracting some value from the height provided by these functions?? How can get out of this problem. I think I'm missing some thing. please help.

Thanks

newprogress
  • 157
  • 1
  • 2
  • 11

3 Answers3

15

Some browsers report the window height incorrectly differently - particularly mobile browsers, which have a different viewport concept. I sometimes use a function to check several different values, returning whichever is the greatest. For example 

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

Edit: I just looked at how jQuery does it and it does indeed use Math.max and a series of properties - however the list it checks is slightly different to those in my example above, and since I usually trust the jQuery team to be better at this stuff than I am; here is the non-jQuery jQuery solution (if that makes any sense): 

function documentHeight() {
    return Math.max(
        document.documentElement.clientHeight,
        document.body.scrollHeight,
        document.documentElement.scrollHeight,
        document.body.offsetHeight,
        document.documentElement.offsetHeight
    );
}
Ola Tuvesson
  • 5,062
  • 2
  • 28
  • 37
  • plus 1 for easy and *"non-JQuery jQuery solution"*, ha – LinusGeffarth Aug 05 '17 at 12:25
  • 1
    :) Thanks. Bit old now perhaps, but maybe still valid/useful? Don't tend to bother much about browser/screen pixel dimensions these days - all fluid, stretchy and "responsive" :| More CSS3 and media queries than JavaScript/jQuery. – Ola Tuvesson Aug 08 '17 at 22:42
2

You can use Jquery to achieve this...

$(document).ready(function(){
    browserWindowheight = $(window).height();
    alert(browserWindowheight);
});
Subhajit
  • 1,929
  • 3
  • 19
  • 21
  • 1
    He never said he was using jquery. – nunespascal Jun 18 '12 at 05:51
  • 2
    I mentioned that he has to use jquery... then why downvoting..? – Subhajit Jun 18 '12 at 05:58
  • 2
    where does he say he doesn't want to use jquery? – astro boy Jun 18 '12 at 06:01
  • @nunespascal He hasn't mentioned that he doesn't need jQuery. And instead of downvoting why don't you put your efforts in answer? – Dipak Jun 18 '12 at 06:05
  • 1
    @nunespascal reply here how are you sure that he doesn't want a Jquery solution...???? i can't see any kind of phrase in his question that he doesn't want to use Jquery??? Its really bad that you are missusing your reputation of downvoting. – Subhajit Jun 18 '12 at 06:06
  • 1
    @nunespascal I think jQuery is a valid approach to use. Especially since the OP is having problems getting a consistent result, and that's what jQuery delivers in this case. – Jonathan Nicol Jun 18 '12 at 06:06
  • @nunepascal I deleted my answer after you bit my head off - what's with the aggro? Not like jQuery much? – Ola Tuvesson Jun 18 '12 at 06:07
  • I agree jquery is a good approach. I am just saying the solutions are incomplete without telling the user that he should use jquery. – nunespascal Jun 18 '12 at 06:07
  • 1
    @nunespascal The first thing this solution says is "You can use Jquery to achieve this". – Jonathan Nicol Jun 18 '12 at 06:08
  • 1
    Can't you see in my answer that I have written **You can use Jquery to achieve this...** – Subhajit Jun 18 '12 at 06:08
  • @nunespascal You are misusing your reputation and discouraging the people who really give answers. THIS IS NOT THE WAY – Dipak Jun 18 '12 at 06:08
  • You changed your answer later Subhajit. It was not there when I downvoted it. – nunespascal Jun 18 '12 at 06:09
  • 1
    You missed it or not noticed, its was there from bigining mate... :) From next time before downvoting check the answer totally and ready each word.. – Subhajit Jun 18 '12 at 06:11
  • hi guys! I don't have problem in using jquery. That's why I didn't mention it. Sorry for that. I just want the solution to my problem. – newprogress Jun 18 '12 at 06:13
  • @nunespascal Or give a right answer instead of examining other – Dipak Jun 18 '12 at 06:14
  • @newprogress okay then just ignore the comments and check the solution let us know whether it helped it. – Subhajit Jun 18 '12 at 06:15
1

Have you tried using:

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

For Internet Explorer with backward-compatibility mode, use 

document.body.offsetHeight

And also, Internet Explorer (standards mode, document.compatMode=='CSS1Compat'): 

document.documentElement.offsetHeight

Have a look at the following for more information:

skub
  • 2,266
  • 23
  • 33