1

I'm experiment an inconsistent result trying to get the height of the browser's window.

To do it, I am using $(window).height(); on document ready and I've noticed I get different values (with 15px of difference) between cases. It seems that the results get influenced by the style sheet I am applying. Deleting the style sheet solve the problem (or just removing a couple of lines (such as font-size: 2em; , float:left; position:absolute;... things which doesn't seem to be related at all)

I believe styles should not be related with the browser's window size at all. Shouldn't it be returning exactly the same value for any case?

I've read the documentation of $.height() and it doesn't say anything about this topic.

I've also noticed it returns the correct dimensions when called on load like so:

$(window).on('load', function() {
    var windowHeight = $(window).height();
    console.log(windowHeight);
});

I'm sorry but I couldn't reproduce my problem at jsfiddle.

Alvaro
  • 40,778
  • 30
  • 164
  • 336
  • Isn't this problem related to this http://stackoverflow.com/questions/3698200/window-onload-vs-document-ready ? – Rotem Feb 20 '14 at 11:10
  • 1
    It doesn't make a lot of sense to me to have to load all the page content just to get the height of the window. I can understand it can be needed to get the `height` of an element, but not for the window. – Alvaro Feb 20 '14 at 11:13
  • 1
    Well, it may got to do with the scrollbar. After all the content was loaded you may have a scrollbar that can reduce the output by 15px... – Rotem Feb 20 '14 at 11:19
  • 2
    http://stackoverflow.com/questions/2596594/jquery-window-width-and-window-height-return-different-values-when-vie – billyonecan Feb 20 '14 at 11:24

2 Answers2

1

It may got to do with the scrollbar. After all the content was loaded you may have a scrollbar that can reduce the output by 15px.

Rotem
  • 2,306
  • 3
  • 26
  • 44
0

$(window).height(); will never change by font or float in css. It looks like you are adjusting your javascript control window which is causing the size to vary. Please dont adjust the console size, then you will have fixed window size.

SajithNair
  • 3,867
  • 1
  • 17
  • 23
  • Even hiding the developer tools I get the same inconsistencies. – Alvaro Feb 20 '14 at 11:21
  • And yep, by just removing a `font-size`, I get a different result. Believe it or not :) – Alvaro Feb 20 '14 at 11:22
  • 1
    @Alvaro do you have horizontal scrollbar when you add the font-size? – Rotem Feb 20 '14 at 11:23
  • I have no horizontal scrollbar at all. – Alvaro Feb 20 '14 at 11:26
  • Can you try printing the height() in the page instead of console. Like $("#anyDivID").html(windowHeight) instead of console.log(windowHeight); – SajithNair Feb 20 '14 at 11:29
  • @Rotem it seems you are right. My `html` and `body` elements had `overflow:hidden;` but it is applied by jQuery. If I apply it directly on the CSS, the problem disappear. Please add it as an answer and I will accept it. – Alvaro Feb 20 '14 at 11:35