根据内容动态改变div元素的高度 [英] Dynamically changing height of div element based on content

问题描述

我正在为我的网站设计一个类似Facebook的工具栏。

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

我试图找出如何根据AJAX调用放入的内容获取弹出的div元素。

例如，当用户点击在线收藏夹（4）时，我会弹出一个固定高度的div元素，并显示正在加载...。一旦内容加载，我想根据返回的内容来确定div元素的高度。

我可以通过计算每个元素的高度*元素的数量，但这不是很优雅。

有没有办法用JavaScript或CSS来做到这一点？ （注意：也使用JQuery）。

谢谢。

JavaScript：

 函数favoritesOnlineClick（）
 {
 $（'#OpenOnlinePopUp'）。toggle（）; 
 $（'＃onlineStatusPopUp'）。hide（）; 
 if（$（'＃favoritesOnlinePopUp'）。css（'display'）=='block'）{loadFavoritesOnlineListing（）; } 
} 
  

CSS和HTML：

  #toolbar 
 {
 background：url（'/ _ assets / img / toolbar.gif'）repeat-x; 
 height：25px; 
位置：固定; 
 bottom：0px; 
宽度：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; 
背景：＃2b2b2b; 
 float：left; 
位置：绝对; 
 left：-1px; 
 top：-501px; / * auto; * / 
 height：500px; / * auto; * / 
 overflow：auto; 
} 
 #toolbar #favoritesOnlineListing 
 {
 font-size：12px; 
} 
< div id =toolbar> 
< div id =favoritesOnlinestyle =<？php if（$ onlinestatus == -1）{echodisplay：none;;}？>> 
< img class =favoritesOnlineIconsrc =/ _ assets / img / icons / favorite-small.gif/>< a href =javascript：favoritesOnlineClick（）;>收藏夹在线（< ; span id =favoritesOnlineCount><？php echo $ favonlinecount;？>< / span>）< / a> 
< div id =favoritesOnlinePopUp> 
< div id =popUpTitleBar> 
< div id =popUpTitle>收藏夹在线< / div> 
< div id =popUpAction>< a href =javascript：closeFavoritesOnline（）;> x< / a>< / div> 
< / div> 
< div id =favoritesOnlineListing> 
 <！ - 收藏夹在线内容放在这里 - > 
< / div> 
< / div> 
< / div> 
< / div> 
  

解决方案

也许你可以移除height属性（确保它是没有在CSS中设置），并让DIV自行扩展。

I'm working on a Facebook-like toolbar for my website.

There's a part of the toolbar where a user can click to see which favorite members of theirs are online.

I'm trying to figure out how to get the div element that pops up to grow based on the content that the AJAX call puts in there.

For example, when the user clicks "Favorites Online (4)", I show the pop up div element with a fixed height and "Loading...". Once the content loads, I'd like to size the height of the div element based on what content was returned.

I can do it by calculating the height of each element * the number of elements but that's not very elegant at all.

Is there a way to do this with JavaScript or CSS? (note: using JQuery as well).

Thanks.

JavaScript:

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

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

解决方案

Maybe you could remove the height property (make sure it's not set in the CSS) and let the DIV expand in height by itself.

这篇关于根据内容动态改变div元素的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！