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 to auto, which means the div's height depends only on the elements inside of it. When I tried using the .height() in my page, I got the following result:

Chrome: 1276 px
Firefox: 1424 px

But when you see them both they have equal height. The only thing is that the height() function returns different result.

Here's the code:

<div class="single-mid" style="position:relative;width:700px;margin:-1px 0 0 1px;padding-right:56px;">
    <div>Sample Inside Element</div>
</div>

<script type="text/javascript">
$(document).ready(function(){
     var less_height = $('.single-mid').height() -10;
     $('.single-mid').height(less_height);
});
</script>

But I tried to set the div's height into 1424px. Both browser return the same result.

Any ideas? Thanks in advance.

Answer 1

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/).