javascript - 子元素的总高度大于父元素的高度

Question

在这个实验中，第一个 child 只是通过填充形成的，而第二个 child 必须填充父容器的剩余空间。为了解决这个问题，我尝试使用calc()函数，我用padding-top和padding的总和减去父元素的高度100vh - 第一个元素的底部，即 6rem。我得到的结果是一个高度超过了父元素剩余空间的高度，留下了溢出。

.container {
  width: 100%;
  height: 100vh;
  background: #dfdfdf;
}

.first-box {
  width: 100%;
  padding: 3rem 0;
  background: firebrick;
  color: #dfdfdf;
  font: 1rem 'Arial', Helvetica, sans-serif;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

.second-box {
  width: 100%;
  height: calc(100vh - 6rem);
  background: purple;
  color: #dfdfdf;
  font: 1rem 'Arial', Helvetica, sans-serif;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="container">
  <div class="first-box">This box has no height, only formed by padding</div>
  <div class="second-box">This box must fill the whole container with the remaining offset height of parent</div>
</div>

在这种情况下我应该改用 Javascript 吗？因为与 CSS 不同，您可以在 Javascript 中获取元素的偏移高度，无论它是由高度构成还是仅由填充构成。

Answer 1

您已经在使用 flexbox，所以将它应用到您的容器并让它处理高度。

您的容器还需要将 flex-direction 设置为列。然后从第二个框中删除高度属性并添加 flex: 1 1 auto;。

请记住，我没有在示例中添加任何 vendor 前缀。

.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  background: #dfdfdf;
}

.first-box {
  width: 100%;
  padding: 3rem 0;
  background: firebrick;
  color: #dfdfdf;
  font: 1rem 'Arial', Helvetica, sans-serif;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

.second-box {
  width: 100%;
  background: purple;
  color: #dfdfdf;
  font: 1rem 'Arial', Helvetica, sans-serif;
  
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
}

<div class="container">
  <div class="first-box">This box has no height, only formed by padding</div>
  <div class="second-box">This box must fill the whole container with the remaining offset height of parent</div>
</div>