jQuery : $('div.myclass').height() is not accurate
html, jquery
Solution
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.
Problem
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`