0

Here's the case:

<style>
  body { 
    margin: 0; 
  }
  p { 
    font-family: arial; 
    font-size: 13px; 
    margin: 13px 0;
  }
</style>

<div id="content">
  <p>The real me lives on the internet!</p>
</div>
<p><code>#content</code>'s height is: <span></span>px.</p>

<script src="jquery.min.js"></script>
<script>
  var $x = $('#content').outerHeight(true);
  $("span").text($x);
</script>

I'm trying to retrieve the total height of a (unmargined) DIV, which have margined content inside it.

jsfiddle

screenshot

So... yeah... how can I get the #content's total height, INCLUDING the overflowing margins from whatever inside it? (going by the example, the script should be returning 42px instead of 16px)

Thank You.

Community
  • 1
  • 1
Leader
  • 68
  • 7

2 Answers2

1

Try to add overflow: hidden for the <div> so that the height is "calculated" with the contents' margin.

#content {overflow: hidden;}

You would get the correct value of 41px now.

Snippet

var $x = $('#content').outerHeight(true);
$("span").text($x);
body { margin: 0; }
#content {overflow: hidden;}
p { font-family: arial; font-size: 13px; margin: 13px 0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="content">
  <p>The real me lives on the internet!</p>
</div>
<p><code>#content</code>'s height is: <span></span>px.</p>
Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
0

Its the p element that has the margins, not the #content element.

Therefore you should use rather use this:

var $x = $('#content').find("p").outerHeight(true);
$("span").text($x);

Here is the JSFiddle demo

Ahs N
  • 8,233
  • 1
  • 28
  • 33
  • But then $x would return the total height of

    , right?

     – Leader Aug 27 '15 at 07:35
  • 1
    I'm trying to get the `#content`'s height though... imagine if `#content` have multiple P tags inside... thank you for answering, but apparently, simply adding `overflow:hidden`; for the `#content` could do the trick... not sure with the logic around it... but at least it worked :p – Leader Aug 27 '15 at 07:45