jQuery - surveiller le changement de hauteur des éléments

Question

J'ai un élément qui est positionné en absolu et qui a une hauteur fixe.

Cet élément a beaucoup d'éléments enfants, ce qui pourrait changer leur contenu, et par conséquent leur hauteur. Le problème est que l'élément conteneur ne se déploie pas automatiquement pour s'adapter à ses enfants (en raison de sa hauteur fixe et de sa position absolue).

Comment puis-je redimensionner le conteneur principal pour qu'il corresponde à la taille de ses enfants?

Answer 1

option si vous ne voulez/besoin de le faire dans quelque chose jQuery comme ce qui suit fonctionnerait:

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

Exemple de travail:

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

Answer 2

En supposant que vous pouvez changer le CSS, cela peut être fait assez simplement en CSS. Au lieu de définir height, réglez simplement min-height et votre élément devrait se dilater ainsi.

min-height