1

TLDR: 複数の重なった Fluid-Height div をラップするコンテナを取得するにはどうすればよいですか?

私はいくつかのオブジェクトを持つ div を持っています:

<div class="container">
  <div class="a" style="height: 300px;">Tab page a</div>
  <div class="b" style="height: 100px; display: none;">Tab page b</div>
  <div class="c" style="height: 200px; display: none;">Tab page c</div>
  ...
</div>

ユーザーのアクションに基づいて、フェードアウトするときにフェードインbしaます (つまり、クロスフェードします)。これには、両方を の左上隅に揃える必要がありますcontainer。通常、position: absolute;デフォルトtop: 0;で使用し、left: 0;それらを重ね合わせます。aこれに関する問題は、フローから削除されたため、コンテナーが (私が望む内容の高さではなく) 0px の高さに折りたたまれることですb。

aでは、と で絶対配置を使用することはできませんb。他にどうすればそれらをオーバーラップさせることができますか? 私は子供たちの高さを知らないので（彼らはその内容に基づいて動的に変化する可能性があります）、ネガティブmargin-topも機能しません。

これはJSなしでも可能ですか？そうでない場合、A) 少数の子、containerまたは B) 子が固定サイズ (事前またはその他の方法でわかっている) であると仮定しない、最もハッキリしない方法は何ですか。

4

1 に答える 1

0

クロスフェード要素のサイズがわかっている場合、最善の策は、コンテナ要素の高さと幅を設定することです。幅/高さが 1 つだけ必要な場合は CSS を使用するか、コンテナに必要な場合は JavaScript を使用します。クロスフェードで新しい次元に適応します。

私が説明した Javascript メソッドは、http: //jsfiddle.net/mkd9s/2/で実際に見ることができます。

重要な部分は次のとおりです。

// Get Heights
var aHeight = $('.a').height(),
    bHeight = $('.b').height();

// Set Height on Load
$('.container').height( aHeight );

// Fade on Click
$('.fade').on('click', function(event) {
    event.preventDefault();
    $('.a').fadeOut("slow");
    $('.b').fadeIn("slow");
    $('.container').animate({ height: bHeight });
});

最初にコンテナーの高さを設定し、次にコンテナーの高さをアニメートして、ボタンがクリックされたときに 2 番目の要素の高さになります。

コンテナに 2 つ以上の要素がある場合、これは急速に扱いにくくなることに注意してください。

于 2013-09-12T07:15:52.713 に答える