jquery: wrong values when trying to get div height

Question

i'm having this html structure:

<div class=container>
    <div class=content>
            Content goes here
    </div>
</div>

i'm reading out the div.content height using:

var height = $("div.content").height();

will return 17 (in my testcase)

works nice so far (when comparing it with the actual height using firebug). the problem is - when filling up continuous text >2 lines i'm getting a wrong value. 2 lines will give me 34 (correct) but 3 lines will also return 34 although the actual height is 51. of course, when filling in plenty of text the resulting value is all wrong. seems like a jquery bug to me .. any ideas for a workaround? thanks

ps: works perfect in IE, firefox returns a wrong value ..

Answer 1

Use $("div.content").outerHeight(); instead.

If you add -true- in the parenthesis if you want to include all margins & paddings as well. $('div.content').outerHeight(true);

Also cross-browser heights may differ if you don't have very good CSS Resets, or are looking at a legacy browser (ie6/7), but with a good reset their differences will be very miniscule.

jsFiddle Demo