javascript - 有什么快速的方法可以找到容器的占用高度？

Question

在飞行中，没有。 child 被附加到 parent 。我可以获得 scrollheight 并将滚动条(自定义)添加到其中。

循环我们可以获得的所有 child ，但还有其他捷径吗？

我想在不需要时删除它。所以我想知道高度被占用了多少，在有一些空间是空的，我可以删除滚动条。

主要是我不知道 children 的高度，每个 child 的高度也各不相同， child 的数量也不可预测。

如何计算 child 的高度占多少？

我试过这样的:

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/