javascript - 使用jquery获取div的计算高度

Question

如果我有一个相对定位的 div，然后其中的一些绝对定位的 div，则父 div 将没有高度。 div 的内容可能会改变，所以我需要一种方法来计算内容的高度并动态设置父级的高度。 jquery 有没有简单的方法来做到这一点？请参阅以下示例:

http://jsfiddle.net/vgyrbcbs/

#parent {
    position: relative;
}
.child {
    position: absolute;
    width: 100px;
    height: 100px;
    background: #ff0000;
}  
#child1 {
    top:0;
    left:0
}
#child2 {
    top:50px;
    left:150px;
}
#child3 {
    top:150px;
    left:20px;
}
#child4 {
    top:250px;
    left:150px;
}

<div id="parent">
    <div class="child" id="child1"></div>
    <div class="child" id="child2"></div>
    <div class="child" id="child3"></div>
    <div class="child" id="child4"></div>
</div>

如何计算父级的高度？

Answer 1

类似这样的:http://jsfiddle.net/vgyrbcbs/2/

var height = 0;

$("#parent div").each(function () {
   height += parseInt($(this).css("height").split("px")[0]);

});

$("#parent").css("height", height);

更新

您可以检查最后一个 div 是否始终位于底部，如下所示:http://jsfiddle.net/vgyrbcbs/4/

$("#parent").css("height", parseInt($("#parent div:last").css("top").split("px")[0]) + parseInt($("#parent div:last").css("height").split("px")[0]));