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来计算盒子的高度以扩展包装盒。我不知道这些盒子的高度，因为它们具有随机高度，我不知道客户端不断生成的盒子总数。我需要一个解决这个问题的通用jQuery。如果我没有扩展mainWrap，那么盒子将被切断，我需要使用溢出：隐藏其他原因。

对此有何帮助？

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();

Answer 2

绝对定位的元素不再是布局的一部分。您需要使用JavaScript来衡量子元素的大小和位置，并相应地设置父元素的大小。

Answer 3

在纯JavaScript中，您可以使用以下内容：

var wrapbox = document.getElementById('mainWrap').childNodes[1],
    els = wrapbox.childNodes,
    i,
    height = 0;

for (i in els) {
    if(els[i].nodeType == 1) {
        height += parseInt(els[i].offsetHeight);
    }

    wrapbox.style.height = height + 'px';
}

http://jsfiddle.net/AJLe7/1/

注意我已将class="mainWrap"更改为id="mainWrap"以简化答案...

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

3 个答案: