CODEWITHSUNDEEP
javascriptjqueryhtml
3gwebtrain
3gwebtrain

Reputation: 15293

Is there any quick way to find occupied height of a container?

On fly, there is no.of childrends are appened to the parent. i can able to get the scrollheight and add the scroller (custom) in to it.

Looping all children we can get, but any other short way?

I would like to remove the same, when not required. so i would like to know the how much the height are occupied, in there is some space empty, i can remove the scroller.

the main things is i don't know the children height, each children height as well varies, and no.of children as well unpredictable.

how to calculate how much of the height accupied by my childrens?

i tried like this:

var accupiedHeight = $('.blue').innerHeight();
console.log(accupiedHeight);

No result.

Live

Upvotes: 1

Views: 155

Answers (2)

Mario A
Mario A

Reputation: 3363

If I understand you right, what you are searching is simply jQuerys .height() method

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

http://api.jquery.com/height/

This will work if the container has no heigth explicitly set. If the height is explicilty set, wrap the child elements in an extra div and use the .height() method on that. E.g:

<div class="blue">
  <div>
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
  </div>
</div>

And the js:

var accupiedHeight = $('.blue div').height();
console.log(accupiedHeight);

Upvotes: 1

dfsq
dfsq

Reputation: 193261

You can calculate total height of children elements if you clone parent container and set the height to auto:

var accupiedHeight = $('.blue').clone().css('height', 'auto').appendTo('body').height();

Demo: http://jsfiddle.net/gf1Ljh8u/3/

This way it will look pretty concise. However I would still prefer looping version as it's more comprehensive.

var accupiedHeight = 0;
$('.blue').children().each(function() {
    accupiedHeight += this.scrollHeight;
});

Demo: http://jsfiddle.net/gf1Ljh8u/4/

Upvotes: 2

Related Questions