javascript - jQuery get height of the contents in a container -

i'm not sure if possible want height of contents in container. let's assume 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 true height of content of #container? inline heights example show parent height anything. want know how content occupying. again assuming there arbitrary number of child tags.

note in example above true height height of paragraphs combined if aren't inline.

not sure if can done using single jquery/javascript function . snippet can useful

html

 // added common class 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 child element using common class 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 want know why setting margin:0

jsfiddle

edit

add iterator exclude inline elements. .each iterating on elements has cc class. can made inline not have cc class.

here snippet of checking display type of element before adding height.

var cc = 0;     $("#container > .cc").each(function(){       var getdisplay = $(this).attr('dipslay') // check display attribute        // using ternary operator         getdisplay !=='inline'? (cc += $(this).outerheight()) :0;      }); 

updated fiddle