jQuery - 手表元素高度变化

Question

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

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

我怎样才能调整主容器的大小来匹配它的孩子的身高？

Answer 1

可选，如果你确实想/需要做它的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/

Answer 2

假设你可以改变CSS，这可以做相当简单的CSS。而不是设置height只需设置min-height，您的元素应该如此展开。

min-height