0

I want to know the real height of the DOM element. My case is something like this. My example has not CSS, only a default browser CSS (Firefox), you can test it:

<div class="myClass">
    <p>XXX</p>
    <p>YYY</p>
    <p>ZZZ</p>
</div>
<div class="myClass2">
  UUU
</div>

Results:

jQuery(".myClass").height()          ------> 89px
jQuery(".myClass").innerHeight()     ------> 89px
jQuery(".myClass").innerHeight(true) ------> 89px
jQuery(".myClass").outerHeight()     ------> 89px
jQuery(".myClass").outerHeight(true) ------> 89px

But the div.myClass has more height. The problem is with the elements that have margin. I know that I can execute something like this:

jQuery(".myClass").outerHeight(true)

But this only works if this element has the margin, in my case the margin has the children elements (the p tags). You can test it, UUU is moved downwardly because the margin of <p>ZZZ</p>

is there some way to know the real height?? or the real margin??

You can see in jsfiddle. This example has css because jsfiddle has css

I have fear, if I have this rule every works:

div.myClass {
    border: 1px solid red;
}

​

Thanks,

Goin
  • 3,856
  • 26
  • 44
  • 3
    Can you provide a JsFiddle testcase? – Exelian Aug 14 '12 at 15:37
  • 1
    Already Answered in http://stackoverflow.com/questions/349705/total-width-of-element-including-padding-and-border-in-jquery – Valerio Emanuele Aug 14 '12 at 15:37
  • Of course, this is a good idea – Goin Aug 14 '12 at 15:37
  • untill you give some height manually, total hight will depends on the elements inside that div – Shreedhar Aug 14 '12 at 15:38
  • @KDavid You can see that this does not work in the jsfiddle. – Goin Aug 14 '12 at 15:57
  • @Goin What browser are you using? When I run it in chrome, I do get different values. How about you tell us the values you expected with each call. Also, please don't use `alert()`, `console.log` is a lot less annoying – Ruan Mendes Aug 14 '12 at 16:23
  • @JuanMendes See the CSS rules. If you comment a rule of CSS (only comment div.myClass) you get the same results that me. This is very strange – Goin Aug 14 '12 at 16:29
  • @Goin I saw the CSS rules, I changed them all and the results changed. You have to list what values you expect to see and why, not just that you don't like them. Your lack of definition of the problem is probably the reason you don't have any answers here. Also updated your fiddle so it doesn't have `alert` – Ruan Mendes Aug 14 '12 at 16:50
  • @JuanMendes I want to know the real height. For me the real heigth is the height and the margin when this margin is not underhand with other. And for me is confusing that the height change much for a CSS rule. I updated the jsfiddle. I'm sorry for my english and my delay – Goin Aug 14 '12 at 23:33

0 Answers0