jquery - CSS 在动态更改内容时保持 div 的高度

Question

我试图根据他的内容强制一个 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

内容被检索

隐藏动图

淡入#my_content

很明显，无论何时 #my_content 被隐藏，#my_content_bottom 都会出现，然后在新内容淡入后立即下降，没有任何动画，所有这些“div 跳跃”看起来很糟糕。

如果我能让wrapper div不崩溃，问题就大致解决了。

为了做到这一点，我尝试制作#collapse_saving_div 并将其最小高度设置为 100%，我认为这样做可以将他的高度固定在#my_content 的高度，直到加载更大或更小的东西。但它不起作用。

有什么建议吗？谢谢

编辑:使用js解决了

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

Answer 1

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

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

然后，内容加载完成后，想要新的高度生效时:

elem.style.height = "auto";