コンテンツを動的に変更するときにCSSがdivの高さを維持します

Question

divにコンテンツに応じて特定の高さを強制し、新しいコンテンツがロードされたときにのみ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 jumping"は悪く見えます。

ラッパーdivを折りたたむことができない場合は、この問題をおおまかに解決できます。

私は#collapse_saving_divを作成して100％の最小高さを与えようとしましたが、それ以上の大きさまたは小さいものがロードされるまで＃my_contentの高さに修正すると思いました。 しかし、それは動作しません。

提案がありますか？おかげ

は、編集：

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

（私はjQueryのをしないので、生JS）： これを追加し、DIVの内容を削除する前に

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

Answer 1

を使用して、JSでそれを解決コンテンツが読み込まれた後、新しい高さを適用する場合：

elem.style.height = "auto";