我试图强迫div具有一定的高度,具体取决于他的内容,并且仅在加载新内容时才对其进行更改。

假设我有:

<div id="wrapper" style="width: 90%; margin: 0 auto;">
 <div id="collapse_saving_div" style="min-height: 100%;">
  <div id="my_content" style="width: 100%;">
    Content
    Content
    Content
  </div>
 </div>
  <div id="my_bottom_content" style="clear: both;">
  </div>
</div>


我将使用以下脚本将内容动态加载到#my_content中:

隐藏#my_content

显示一个loader.gif

内容被检索

隐藏gif

#my_content中的淡出

问题是,显然,每当#my_content被隐藏时,#my_content_bottom就会出现,然后在淡入新内容后立即消失,而没有任何形式的动画,并且所有这些“ div跳跃”看起来都很糟糕。

如果我可以使包装器div不崩溃,它将大致解决该问题。

为了做到这一点,我尝试制作#collapse_saving_div并将其最小高度设为100%,我认为这样做可以将他的身高固定在#my_content的高度,直到装入更大或更小的东西为止。
但这是行不通的。

有什么建议么?谢谢

编辑:
通过使用js解决了它

var content_height = $('#main_content').height();
        $('#main_content').hide();
        $('.loader').height(content_height);
        $('.loader').show();

最佳答案

在删除div的内容之前,添加以下内容:(原始JS,因为我不使用jQuery)

elem.style.height = elem.offsetHeight+"px";


然后,在加载内容之后,当您希望新高度生效时:

elem.style.height = "auto";

关于jquery - 动态更改内容时CSS保持div的高度,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/10035851/

10-12 12:25
查看更多