Javascript 如何设置高度，或允许div延伸到其中绝对位置元素的高度？

我有一个容器div，其中包含绝对定位的元素。这些元素的高度都是可变的。但是，每行都有一个设置的数字，但是这些行在标记中没有以任何方式定义

我无法以任何方式修改标记，因为它是从库（）输出的

如何使用CSS或JavaScript（jQuery可用）扩展父div的高度以匹配子div的高度

我有一把小提琴在这里显示问题：-期望的效果是蓝色盒子“伸展”到红色盒子的高度。但是请记住，框的高度是可变的，因此我不能简单地在行中循环并计算第一列的高度（请参见下面的示例图像）。小提琴的代码如下：

CSS

.container{
    position:relative;
    background:blue;
    min-height:100px;
}
.box{
    position:absolute;
    width:75px;
    height:75px;
    margin:5px 5px;
    background:red;
    border:1px solid black;
}

HTML

<div class="container">
    <div style="top:0; left:0px;" class="box"></div>
    <div style="top:0; left:85px;" class="box"></div>
    <div style="top:0; left:170px;" class="box"></div>
    <div style="top:0; left:255px;" class="box"></div>
    <div style="top:0; left:340px;" class="box"></div>
    <div style="top:85px; left:0px;" class="box"></div>
    <div style="top:85px; left:85px;" class="box"></div>
    <div style="top:85px; left:170px;" class="box"></div>
    <div style="top:85px; left:255px;" class="box"></div>
    <div style="top:85px; left:340px;" class="box"></div>
    <div style="top:170px; left:0px;" class="box"></div>
    <div style="top:170px; left:85px;" class="box"></div>
    <div style="top:170px; left:170px;" class="box"></div>
    <div style="top:170px; left:255px;" class="box"></div>
    <div style="top:170px; left:340px;" class="box"></div>
</div>

循环遍历每一行并计算出最高元素的高度将不起作用，因为它下面的元素可能要短得多，从而导致计算中断。请参见此示例以了解我的意思：

---

请注意：这个问题的其他答案不适用，因为我的子div的高度可变，并且因为我不需要纯CSS解决方案。因此我不认为这是一个重复的问题，我已经搜索了其他类似的问题。

您可以循环子元素以确定哪个元素离顶部最远：

var height = 0;

$('.container > div').each(function() {
    var $this = $(this),
        bottom = $this.position().top + $this.outerHeight();

    if(bottom > height) {
        height = bottom;
    }
});

然后将高度设置为该子体的顶部和该子体的高度之和

$('.container').height(height);

---

如果每个

.box

上都有边距，您可能需要修改此边距，以将

true

传递到

outerHeight

。很聪明，很明显，我现在看到了。我试图把事情复杂化。谢谢：）