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.

So you don't mean you want to know its 100% height. or say your browser window is 800px high, it tells you 800px but rather how many pixels the two lines below each other use, even though you have set a different height on the container? — putvande, Jan 27 '16 at 15:05
Of course I searched the web. I've been searching for 2 days! You don't need to vote down if you didn't understand the question — Arijoon, Jan 27 '16 at 15:25
No I do not care about converting % to px! I want to know the height of content inside the bigger parent (not the height of the parent but the height of content combined). — Arijoon, Jan 27 '16 at 15:29

score 3 · Accepted Answer · edited May 23 '17 at 12:15

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

But what if the children are inline? That will only work for block displayed item correct? — Arijoon, Jan 27 '16 at 16:48
Still a flawed answer. Broken for inline-block, for inline children that wrap, for children that float, etc. I suppose the real solution is to subtract min and max y coordinates over all children edges with [`.getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect). But I wonder if that has to contend with [positioning coordinate variations](http://javascript.info/coordinates). — Bob Stein, Sep 06 '19 at 16:56

empiric · Answer 2 · 2016-01-27T15:10:18.983

You can use the .height()-functions of jQuery:

$('#container').height();

Get the current computed height for the first element in the set of matched elements

Or

$('#container').innerHeight();

Get the current computed inner height (including padding but not border) for the first element in the set of matched elements

Or

$('#container').outerHeight();

Get the current computed height for the first element in the set of matched elements, including padding, border, and optionally margin

Demo

score 2 · Answer 3 · answered Jan 27 '16 at 15:09

Try using window.getComputedStyle(/* DOM element */).getPropertyValue("height")

console.log(window.getComputedStyle($("#container")[0]).getPropertyValue("height"))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="container" style="min-height:100vh">
  <div class="child" style="height:100%">
    <div class="another-child">
      <p>Some text here</p>
    </div>
    <div class="another-child">
      <p>Some text here</p>
    </div>
  </div>
</div>

just a small doubt why do it is consoling 200px but on you hover on the DOM using chroome dev's tool you may see height of div.child is 68px and div#container height is equal to height of screen? — brk, Jan 27 '16 at 15:25

score 0 · Answer 4 · answered Jan 27 '16 at 15:04

0

Use the jQuery method $("selector").height(); This will return you how much your container is occupying.

answered Jan 27 '16 at 15:04

Simply Me

1,579
11
23

the CONTENTS in a container – FabricioG Nov 05 '19 at 01:24

score 0 · Answer 5 · answered Jan 28 '19 at 11:12

                  var cc = 0;
                  $("#"+currenId2c+ "> .cc").each(function(){
                  var getDisplay = $(this).attr('dipslay')
                      getDisplay !=='inline'? (cc += $(this).outerHeight()) :0;
                  });
                  var cnt = cc;
                  console.log(cnt);

jQuery get height of the contents in a container

5 Answers5