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

Question

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

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

我怎样才能 - 使用CSS或JavaScript（jQuery可用） - 扩展父div的高度以匹配子级的高度？

我有一个小提琴在这里显示问题：http://jsfiddle.net/WZx4N/1/ - 所需的效果是蓝色框“拉伸＆＃39;到红色框的高度。但请记住，这些框将是可变高度，因此我不能简单地遍历行并添加第一列的高度（请参见下面的示例图像）。以下小提琴代码：

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>

循环每一行并计算出最高元素的高度将不起作用，因为它下方的元素可能会短得多，从而导致计算失败。请看这个例子，看看我的意思：

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

Answer 1

您可以遍历子元素以确定哪一个元素距离顶部最远：

var height = 0;

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

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

然后将高度设置为该孩子的顶部和该孩子的身高之和。

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