Question

如果我有一个相对位置的div，然后是一些div，那些位于绝对位置的父div将没有高度。 div的内容可以改变，所以我需要一种方法来计算内容的高度并动态设置父级的高度。在jquery中有一个简单的方法吗？请参阅以下示例：

#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]));

Answer 2

父亲的身高实际上是0，因为所有元素都是绝对定位的。如果您正在寻找内容的高度，则父级的scrollHeight属性会为您提供该信息。

$('#parent')[0].scrollHeight; // or
$('#parent').get(0).scrollHeight; // or
$('#parent').prop('scrollHeight');

Answer 3

尝试：

var h = 0;
$('#parent .child').each(function(){h = Math.max($(this).offset().top + $(this).height(), h);})
alert(h);

我只搜索高度为底部子元素的顶部+高度

Fiddle

Answer 4

尝试计算最后一个div（子4）偏移顶部+子4高度 - 父偏移顶部

试试这个

var parent_height = $('#child4').height()+$('#child4').offset().top-$('#parent').offset().top;

用jquery得到div的计算高度

4 个答案: