Changement dynamique de la hauteur de l'élément div basé sur le contenu

Je travaille sur une barre d'outils Facebook pour mon site.

Il existe une partie de la barre d'outils où un utilisateur peut cliquer pour voir ses membres favoris en ligne.

J'essaie de comprendre comment obtenir l'élément div qui se développe en fonction du contenu que l'appel AJAX met en place.

Par exemple, lorsque l'utilisateur clique sur "Favoris en ligne (4)", je montre l'élément div divisé avec une hauteur fixe et "Chargement …". Une fois que le contenu est chargé, j'aimerais dimensionner la hauteur de l'élément div en fonction du contenu renvoyé.

Je peux le faire en calculant la hauteur de chaque élément * le nombre d'éléments, mais ce n'est pas très élégant du tout.

Existe-t-il un moyen de le faire avec JavaScript ou CSS? (Note: en utilisant JQuery aussi).

Merci.

JavaScript:

function favoritesOnlineClick() { $('#favoritesOnlinePopUp').toggle(); $('#onlineStatusPopUp').hide(); if ($('#favoritesOnlinePopUp').css('display') == 'block') { loadFavoritesOnlineListing(); } }

CSS et HTML:

  #toolbar { background:url('/_assets/img/toolbar.gif') repeat-x; height:25px; position:fixed; bottom:0px; width:100%; left:0px; z-index:100; font-size:0.8em; } #toolbar #popUpTitleBar { background:#606060; height:18px; border-bottom:1px solid #000000; } #toolbar #popUpTitle { float:left; padding-left:4px; } #toolbar #popUpAction { float:right; padding-right:4px; } #toolbar #popUpAction a { color:#f0f0f0; font-weight:bold; text-decoration:none; } #toolbar #popUpLoading { padding-top:6px; } #toolbar #favoritesOnline { float:left; height:21px; width:160px; padding-top:4px; border-right:1px solid #606060; text-align:center; } #toolbar #favoritesOnline .favoritesOnlineIcon { padding-right:5px; } #toolbar #favoritesOnlinePopUp { display:block; border:1px solid #000000; width:191px; background:#2b2b2b; float:left; position:absolute; left:-1px; top:-501px; /*auto;*/ height:500px;/*auto;*/ overflow:auto; } #toolbar #favoritesOnlineListing { font-size:12px; } <div id="toolbar"> <div id="favoritesOnline" style=" <?php if ($onlinestatus == -1) { echo "display:none;"; } ?> "> <img class="favoritesOnlineIcon" src="/_assets/img/icons/favorite-small.gif" /><a href="javascript:favoritesOnlineClick();">Favorites Online (<span id="favoritesOnlineCount"><?php echo $favonlinecount; ?></span>)</a> <div id="favoritesOnlinePopUp"> <div id="popUpTitleBar"> <div id="popUpTitle">Favorites Online</div> <div id="popUpAction"><a href="javascript:closeFavoritesOnline();">x</a></div> </div> <div id="favoritesOnlineListing"> <!-- Favorites online content goes here --> </div> </div> </div> </div>

Peut-être que vous pouvez supprimer la propriété de hauteur (assurez-vous qu'elle n'est pas définie dans le CSS) et que le DIV augmente en hauteur par lui-même.

Faites-en un élément flottant et n'utilisez pas d'élément de compensation après celui-ci.

Vous devez retirer la taille CSS: propriété 25px dans la barre d'outils, le contenu étendra le conteneur. En outre, les balises de sélection d'ID sont uniques et vous pouvez les spécifier directement sans avoir à faire référence à l'ancêtre:

INCORRECT:

  #toolbar #popUpAction { /*some css */ } #toolbar #popUpAction a { /*some css */ }

CORRECT:

  #popUpAction { /*some css */ } #popUpAction a { /*some css */ }