CSSでダイナミックハイトを正しくアニメーション化

Question

私はウィザードを持ったWebページを持っています。ウィザードには3つのステップがあります。

ユーザーがステップ1からステップ2に進むと、ステップ2でステップ1のコンテンツがその下にプッシュされます。ユーザーがステップ2からステップ3に進むと、ステップ3でコンテンツを表示するためにコンテンツが反転し、ステップ1および2でコンテンツが効果的に隠されます。これはこのBootplyのように動作します。コードは次のようになります。最初の行で

<div class="container-fluid" style="background-color:#eee;"> 
    <div class="container"> 
    <div class="flip-container"> 
     <div class="flipper"> 
     <div class="front"> 
      <div class="step-2-default" id="step2" style="overflow-x:hidden; padding:0.0rem 1.0rem;"> 
      <label>Step 2</label> 
      <p>These are the details of the second step</p> 
      <button id="nextButton2">next</button>   
      </div> 

      <div class="step-1-default" id="step1"> 
      <label>Step 1</label> 
      <p>These are the details of the first step</p> 
      <button id="nextButton1">next</button> 
      </div> 
     </div> 

     <div class="back"> 
      <div id="step3"> 
      <label>Step 3</label> 
      <p>Thank you for using this wizard</p> 
      </div>         
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

、background-colorがeeeに設定されていることに気づきます。それは現れていない。それが表示されない理由は、divの高さが0であるためです。私は、このdivをクラスフロントのdivの高さに基づいてサイズ調整します。言い換えれば、divはdivフロントよりもdivより短くなることはありません。ただし、ステップ2が表示されると、このdivの高さが増加します。そのため、動的である必要があります。

どうすればいいですか？それは私にナッツを運転している！

Answer 1

.frontと.backの高さを100％に設定しました。しかし何の100％？高さについてより具体的にする必要があります。ピクセルを使用するか、高さをautoに設定します。第2の選択肢は、動的コンテンツを持つ方がよい場合です。

.front, .back { 
    width: 100%; 
    height: auto; 
} 

Demo here