有没有快速的方法来找到容器的占用高度？

Question

在飞行中，没有任何子项目被添加到父项。我可以获得scrollheight并添加滚动条（自定义）。

循环我们可以获得的所有孩子，但还有其他任何简短的方法吗？

如果不需要，我想删除相同的内容。所以我想知道高度占用了多少，有一些空的空间，我可以删除卷轴。

主要的事情是我不知道孩子的身高，每个孩子的身高也各不相同，而且孩子的身高也不可预测。

如何计算我孩子的高度是多少？

我试过这样：

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

没有结果。

Live

Answer 1

如果克隆父容器并将高度设置为auto，则可以计算子元素的总高度：

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

演示：http://jsfiddle.net/gf1Ljh8u/3/

这样看起来非常简洁。但是我仍然更喜欢循环版本，因为它更全面。

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

演示：http://jsfiddle.net/gf1Ljh8u/4/

Answer 2

如果我理解你，你正在搜索的只是jQuerys .height()方法

  

获取匹配元素集中第一个元素的当前计算高度

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

如果容器没有明确设置高度，这将有效。如果高度设置为explicilty，则将子元素包装在一个额外的div中，并使用.height（）方法。 E.g：

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

和js：

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