jQuery : $('div.myclass').height() is not accurate [duplicate]

Question

Possible Duplicate:
why jquery .height() get a different result on chrome?

I have a <div> with CSS class myclass. The CSS class is as follow:

.myclass {
    position: absolute;
    width: 192px;
    font-size: 11px;
    background-color: #FFF;
    padding: 15px 15px 0;
    box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
    -moz-box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
    -webkit-box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);    
    display: block;
}

It does not specify height. Contents are loaded dynamically by PHP. In jQuery's $(document).ready(function() { });, I debug the height of the div by:

console.log($('div.myclass').height()); // the result = 330

HTML :

<div class="myclass">
<img src="image.png" />
<p>Text here text here</p>
</div>

However, if I use the Inspect Element feature in Google Chrome, it shows 531px. Why there is a difference? How can I get the 531px value?

UPDATE: $(this).outerHeight(); // 345px, as there is 15px margin

Answer 1

Try putting your code within window load handler, also as your element has 15px padding property, you should use outerHeight method:

$(window).load(function(){
    console.log($('div.myclass').outerHeight()); 
});

Note that outerHeight accepts a boolean value, false means exclude the margin and true means add the margin, also note that outerHeight returns the height of the first matched element with that class name.

Answer 2

console.log($('div.myclass').outerHeight());

The outherHeight will also take into account padding and margin.

EDIT: if you don't need the margin, use innerHeight() instead.