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