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

假设我有

CSS:

HTML:

应用于包装盒的clearfix无法工作，因为它包含具有绝对位置的元素

因此，我需要使用jQuery来计算长方体的高度，以便扩展包裹长方体。我不知道这些盒子的高度，因为它们的高度是随机的，我也不知道盒子的总数，因为它们是由客户不断生成的。我需要一个通用jQuery来解决这个问题。如果我不延长主包装盒将被切断，我需要使用溢出：隐藏的其他原因

---

这方面有什么帮助吗？

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

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

可能是这样的吗

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

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

---

也许是这样的

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

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

---

在纯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';
}

---

请注意，我将

class=“mainWrap”

更改为

id=“mainWrap”

以简化答案…

在纯

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';
}

---

请注意，我将

class=“mainWrap”

更改为

id=“mainWrap”

以简化答案…

我在html中没有看到wrap框，有wrap框，不确定这是否是您的意思。此外，上面的代码有点不正确，因为它将所有的框放在彼此的顶部。另外，我认为你不需要jQuery，可以用CSS完成。对不起，我更新了上面的代码。我在你的html中没有看到包装框，有包装框，不确定这是否是你的意思。此外，上面的代码有点不正确，因为它将所有的框放在彼此的顶部。另外，我认为你不需要jQuery，可以用CSS完成。对不起，我更新了上面的代码谢谢。如果我在.wrap框周围加上边框，我只能看到1像素的顶部，这说明它的高度没有改变。对不起，我忘了在递增之前添加一个零作为默认值。再试一次。我喜欢你最后的.end（）.height（）链：）感谢这是一个很老的问题。但是你不应该再这样做了。现在，您可以重新初始化massy来自动计算网格的包装容器高度。请参阅：在您的物品完成大小更改后运行此操作。谢谢。如果我在.wrap框周围加上边框，我只能看到1像素的顶部，这说明它的高度没有改变。对不起，我忘了在递增之前添加一个零作为默认值。再试一次。我喜欢你最后的.end（）.height（）链：）感谢这是一个很老的问题。但是你不应该再这样做了。现在，您可以重新初始化massy来自动计算网格的包装容器高度。请看：在您的物品完成大小更改后运行此操作。谢谢伙计，目前我正试图了解jQuery，纯js对于我当前的技能来说有点太多了，我必须承认：）谢谢伙计，目前我正试图了解jQuery，纯js对于我当前的技能来说有点太多了，我必须承认：）