有没有快速的方法可以找到容器的占用高度

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

本文关键字：高度 方法 有没有      更新时间：2023-09-26

在飞行中，没有。 的子项附加到父项。 我可以获取scrollheight并将滚动条（自定义）添加到其中。

循环我们能得到的所有孩子，但还有其他捷径吗？

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

最主要的是我不知道孩子的身高，

每个孩子的身高也各不相同，而且没有孩子也是不可预测的。

如何计算我的孩子累积的身高是多少？

我试过这样：

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

没有结果。

住

如果克隆父容器并将高度设置为 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/

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

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

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

如果容器没有显式设置高度，这将起作用。如果高度是显式设置的，请将子元素包装在一个额外的div 中，并对其使用 .height（） 方法。例如：

<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);
相关文章：