0

我试图根据他的内容强制 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's，直到加载更大或更小的东西。但它不起作用。

有什么建议么？谢谢

编辑：通过使用 js 解决它

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

1 回答 1

2

在删除 div 的内容之前，添加这个：（原始 JS 因为我不做 jQuery）

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

然后，在内容加载完毕后，当你希望新的高度生效时：

elem.style.height = "auto";
于 2012-04-05T20:58:26.743 回答