根据内容动态更改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>

答

也许你可以删除height属性（确保它没有在CSS中设置），并让DIV自己在高度上展开。

要添加到这一点，你可能想添加一个max-height属性，如果它超过了max-height，那么添加自定义滚动条 – Steven10172 2013-07-16 19:33:00

答

使它成为一个浮动元素后，不使用清除元件。

答

您应该取出工具栏中的CSS高度：25px属性，内容将展开容器。此外，ID选择标签是唯一的，你可以直接向他们指定，而无需参考祖先：

不正确的：

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

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

正确：

#popUpAction { /*some css */ } 

#popUpAction a { /*some css */ }

根据内容动态更改div元素的高度

相关推荐