jQuery get height of the contents in a container

Question

I'm not even sure if this is possible but I want to get the height of the contents in a container. Let's assume I have

<div id="container" style="min-height:100vh">
    <div class="child">
      <p>Some text here</p>
    </div>
    <div class="another-child">
      <p>Some text here</p>
    </div>
</div>

How do I get the true height of the content of #container? Those inline heights are just as example to show parent height could be anything. I want to know how much the content are truly occupying. Again assuming that there could be an arbitrary number of child tags.

note in the example above the true height is the height of those paragraphs combined if they aren't inline.

Answer 1

Not sure if this can be done using single jQuery/javascript function . But this snippet can be useful

HTML

 // Added a common class to all child element of div#container
     <div id="container" style="min-height:100vh">
        <div class="child cc">
          <p>Some </br>text here</p>
        </div>
        <div class="another-child cc">
          <p>Some text here</p>
        </div>
    </div>

JS

// Loop through all child element using common class to get the total height
var cc = 0;
    $("#container > div.cc").each(function(){
        cc += $(this).outerHeight();
    });
$('#height').append('<p>'+ cc+'</p>' );

CSS

 p{
    margin:0px;
        }

Look here if you want to know why setting margin:0

JSFIDDLE

EDIT

Add an iterator to exclude inline elements. Also the .each is iterating on elements which has cc class. So you can made inline not to have cc class.

Here is a snippet of checking display type of the element before adding their height.

var cc = 0;
    $("#container > .cc").each(function(){
      var getDisplay = $(this).attr('dipslay') // Check the display attribute
       // Using ternary operator 
       getDisplay !=='inline'? (cc += $(this).outerHeight()) :0;
     });

UPDATED FIDDLE