javascript - 当容器中有绝对定位的元素时如何扩展容器？

Question

假设我有

CSS:

.mainWrap { position: relative; overflow: hidden; }
.wrap-boxes { positon: relative; }
.box { position:absolute (position and height is generated by plugin isotope: http://isotope.metafizzy.co/custom-layout-modes/centered-masonry.html }

HTML:

 <div class"mainWrap">
    <div class="wrap-boxes">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </div>

应用于包装盒的 clearfix 将不起作用，因为其中包含具有绝对位置的元素。

因此我需要使用 jQuery 来计算框的高度以扩展 wrap-box。我不知道这些盒子的高度，因为它们的高度是随机的，而且我不知道盒子的总数，因为它们是由客户不断生成的。我需要一个通用的 jQuery 来解决这个问题。如果我不扩展 mainWrap，盒子将被切断，我需要使用 overflow: hidden 出于其他原因。

有什么帮助吗？

Answer 1

也许是这样的？

$.fn.wrapHeight = function() {
    return this.each(function() {
        var height = 0;
        $(this).children().each(function() {
            height += $(this).height();
        }).end().height(height);
    });
};

$('.wrap-boxes').wrapHeight();