根据内容动态改变div元素的高度答案

【问题标题】：Dynamically changing height of div element based on content根据内容动态改变div元素的高度
【发布时间】：2009-03-05 14:03:31
【问题描述】：

我正在为我的网站开发类似 Facebook 的工具栏。

用户可以点击工具栏的一部分来查看他们最喜欢的成员在线。

我正在试图弄清楚如何让弹出的 div 元素根据 AJAX 调用放入其中的内容而增长。

例如，当用户点击“Favorites Online (4)”时，我会显示一个固定高度和“Loading...”的弹出 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>

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

也许您可以删除 height 属性（确保它没有在 CSS 中设置）并让 DIV 自行扩展高度。

【讨论】：

要添加到此，您可能需要添加一个 max-height 属性，如果它超过了 max-height ，请将您的自定义滚动条添加到该属性

【解决方案2】：

使它成为一个浮动元素，并且不要在它之后使用清除元素。

【讨论】：

【解决方案3】：

你应该在工具栏中取出 CSS height:25px 属性，内容将扩展容器。此外，ID 选择器标签是唯一的，您可以直接指定它们而无需引用祖先：

不正确：

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

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

正确：

 #popUpAction  { /*some css */ }

 #popUpAction a  { /*some css */ }

【讨论】：