Question

我有一个元素，它是绝对定位的并且具有固定的高度。

这个元素有很多子元素，可能会改变它们的内容，从而改变它们的高度。问题是容器元素不会自动扩展以适应其子节点（因为它的固定高度和绝对位置）。

如何调整主容器的大小以匹配其子高度？

Answer 1

假设您可以更改css，这可以在css中相当简单地完成。 height而不是设置min-height，因此您的元素应该扩展。

min-height

Answer 2

如果您确实希望/需要在jQuery中执行此操作，则可以选择以下方式：

HTML：

<div id='container'>
 <div class='child'>Content</div>
 <div class='child'>Content</div>
 <div class='child'>Content</div>
 <div class='child'>Content</div>   
</div>

CSS：

.child{
    height: 40px;
    background-color: red;
}
#container{
    height: 120px;
    background-color: gray;
    padding: 5px;
}

的javascript：

var childHeight = 0
$('.child').each( function() {
    childHeight = childHeight + $(this).height();
})
$('#container').height(childHeight);

工作示例：

http://jsfiddle.net/EcZZL/1/

jQuery - 注意元素高度的变化

2 个答案: