内容に基づいてdiv要素の高さが動的に変化する

Question

私は自分のウェブサイトのFacebookのようなツールバーで作業しています。

ユーザーがクリックして、お気に入りのメンバーがオンラインになっているかどうかを確認できるツールバーの部分があります。

私は、AJAXコールがそこに置く内容に基づいて成長するようにポップアップするdiv要素を取得する方法を理解しようとしています。

たとえば、ユーザーが「お気に入りオンライン（4）」をクリックすると、固定高さと「読み込み中...」のpop up div要素が表示されます。コンテンツが読み込まれると、どのコンテンツが返されたかに基づいてdiv要素の高さをサイズ調整したいと思います。

私は、各要素の高さ*要素の数を計算することによって行うことができますが、それはまったくエレガントではありません。

JavaScriptやCSSでこれを行う方法はありますか？ （注：JQueryも使用しています）。

ありがとうございました。

はJavaScript：

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

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

おそらく高さプロパティを削除することができます（CSSで設定されていないことを確認してください）。

Answer 2

それフロート要素作成し、それの後にクリア要素を使用しないでください。

Answer 3

ツールバーのCSS高さ：25pxプロパティを取り出すと、コンテンツがコンテナを展開します。また、IDセレクタタグがユニークであり、あなたが親元を参照することなく、それらに直接指定することができます。

誤：

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

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

CORRECT：

#popUpAction { /*some css */ } 

#popUpAction a { /*some css */ }