根據內容動態更改div元素的高度

我正在爲我的網站設計一個類似Facebook的工具欄。根據內容動態更改div元素的高度

有一個工具欄的一部分，用戶可以點擊查看他們最喜歡的成員在線。

我想弄清楚如何獲得基於AJAX調用放在那裏的內容彈出的div元素。

例如，當用戶點擊「收藏夾在線（4）」時，我會彈出一個固定高度的div元素和「Loading ...」。一旦內容加載，我想根據返回的內容來確定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>

來源

2009-03-05 Tom

也許你可以刪除height屬性（確保它沒有在CSS中設置），並讓DIV自己在高度上展開。

來源

2009-03-05 14:11:42 mbillard

要添加到這一點，你可能想添加一個max-height屬性，如果它超過了max-height，那麼添加自定義滾動條 – Steven10172 2013-07-16 19:33:00

使它成爲一個浮動元素後，不使用清除元件。

來源

2009-03-05 14:07:26 heeen

您應該取出工具欄中的CSS高度：25px屬性，內容將展開容器。此外，ID選擇標籤是唯一的，你可以直接向他們指定，而無需參考祖先：

不正確的：

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

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

正確：

#popUpAction { /*some css */ } 

#popUpAction a { /*some css */ }

來源

2013-12-18 06:26:07 PMG

根據內容動態更改div元素的高度

回答

相關問題