İçeriği temel alan div öğesinin yüksekliğini dinamik olarak değiştirme

Question

Web sitem için Facebook benzeri bir araç çubuğunda çalışıyorum.

Kullanıcının hangi favori üyelerin çevrimiçi olduğunu görmek için tıklayabildiği araç çubuğunun bir kısmı var.

AJAX çağrısının oraya koyduğu içeriğe bağlı olarak büyümek için açılan div öğesinin nasıl alınacağını anlamaya çalışıyorum. Örneğin, kullanıcı "Sık Kullanılanlar Çevrimiçi (4)" seçeneğini tıklattığında, pop up div öğesinin sabit yüksekliğini ve "Yükleniyor ..." ı görüntülediğimde gösteriyorum. İçerik yüklendikten sonra, hangi içeriğin döndüğüne bağlı olarak div öğesinin yüksekliğini ayarlamak isterim.

Her elemanın yüksekliğini hesaplayarak yapabilirim * elemanların sayısı ama bu hiç de çok şık değil.

Bunu JavaScript veya CSS ile yapmanın bir yolu var mı? (not: JQuery'yi de kullanarak).

Teşekkürler.

JavaScript:

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

CSS ve 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> 

Answer 1

Belki de yükseklik özelliğini kaldırabilirsiniz (CSS'de ayarlanmadığından emin olun) ve DIV'nin kendi başına yükseklik genişlemesine izin verin.

Answer 2

bunu bir şamandıra elemanını yapın ve ondan sonra bir takas elemanını kullanmayın.

Answer 3

Araç çubuğunda CSS yüksekliğini: 25px özelliğini çıkarmanız gerekir; içerikler kabı genişletir. Ayrıca, kimlik seçici etiketleri özeldir ve atası başvurmak zorunda kalmadan onlara doğrudan belirtebilirsiniz:

YANLIŞ:

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

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

DOĞRU:

#popUpAction { /*some css */ } 

#popUpAction a { /*some css */ }