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

内容被检索

隐藏gif

淡化#my_content

显然，当#my_content被隐藏时，＃my_content_bottom会出现，然后在新内容消失后立即关闭而没有任何动画类型，所有这些“跳跃”看起来都很糟糕。

如果我能使包装器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";

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

1 个答案: