我试图强迫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/