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

possible duplicate: http://stackoverflow.com/questions/11665657/how-to-calculate-elements-width-and-height-with-their-padding-margin-values-u — Barlas Apaydin, Aug 29 '12 at 18:25

score 37 · Accepted Answer · edited Feb 20 '17 at 14:20

37

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

edited Feb 20 '17 at 14:20

Cœur

37,241
25
195
267

answered Aug 29 '12 at 18:21

Mark Pieszak - Trilon.io

61,391
14
82
96

1

What "occurs"? I get same results in Chrome/Firefox and IE. – Marek Karbarz Aug 29 '12 at 18:32
Do you mean a discrepancy in the Height between browsers? – Mark Pieszak - Trilon.io Aug 29 '12 at 18:37
mcpDESIGNS: yes .. different values – Fuxi Aug 29 '12 at 18:38
1

Oh that's why you always need to have very detailed -reset- css style sheets, just updated the jsFiddle, they should be the same now (ie8 & firefox). – Mark Pieszak - Trilon.io Aug 29 '12 at 18:41
Thank you! Ipad was not getting the correct value without (true) – Mike Jan 31 '17 at 16:44
there is just one thing left: `<3` merci bro – messerbill Sep 27 '17 at 14:23

jquery: wrong values when trying to get div height

1 Answers1

Linked