javascript - 在 CSS 中正确设置动态高度动画

Question

我有一个带有向导的网页。该向导包含三个步骤。

当用户从第 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 短。但是，当显示第 2 步时，此 div 的高度将增加。因此，它需要是动态的。

我该怎么做？快把我逼疯了!

Answer 1

您已将 .front 和 .back 的高度设置为 100%。但是 100% 的是什么？您需要更具体地说明高度，例如使用像素，或将高度设置为自动。如果您将拥有动态内容，则第二个选项更好。

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

Demo here