jQuery .height() problem with chrome

Question

I\'ve been using jQuery Height function. But there was a problem in getting the correct height of my div element. This div element\'s height is set

Answer 1

I had the same issue with bootstrap dropdown menu that elements had to be height normalized. For some menus (not all), jquery did not return the right height, resulting in bad normalization. It was because dropdown menus were hidden during the normalization. It seems that CHROME and FIREFOX does not compute the height correctly when the element is hidden. IE seems to work better in this case.

To solve the issue, I have add (then remove) the bootstrap class "open" to all menus, in order to make them visible during the normalization:

    $(window).on( "load resize orientationchange", function() {
        $(".dropdown").addClass("open");
        normalize_all();
        $(".dropdown").removeClass("open");
    });

Answer 2

I had the same issue, while using font from Google Fonts and it had implicitly set line-height of 1.5em, which the jQuery probably did not see. Once I explicitly wrote line-height:1.5em to my CSS reset (or website font setting), it was OK.

Answer 3

This happened to me and the reason what that some images in the div that I was calculate the height of did not have the height attribute set.

$(window).load( did work for me, but caused too much of a delay for what I wanted to do.

Answer 4

Try two method to fixed height in chrome and IE

jQuery(document).ready(function() {
   // your code here
});

And

jQuery(window).load(function(){
  // your code here
}); 

Answer 5

It seems to be caused by the different default font in the two browsers. If you add the following CSS to your example, the result will be the same for both Firefox and Chrome/Iron:

<style type="text/css">
  div {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2em;
  }
</style>

You could probably use a CSS reset and define the styles yourself. This would give you more control on how to get it to look the same in most browsers.

Answer 6

Had the same issue. But if I did a brief setTimeout delay before doing the hight check, chrome started reporting the same height as firefox. It seems chrome triggers the document ready state before fully determining how the content will alter the actual size of the container...!? In any case, my fix was to change my:

$(document).ready( ...

to a:

$(window).load( ...

which doesn't trigger until "all sub-elements have been completely loaded" (from http://api.jquery.com/load-event/).