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 の高さが固定されると思いました。しかし、うまくいきません。

助言がありますか？ありがとう

編集：jsを使用して解決しました

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

1 に答える 1

2

div のコンテンツを削除する前に、これを追加します: (jQuery を使用しないため、生の JS)

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

次に、コンテンツがロードされた後、新しい高さを有効にする場合:

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