儿童元素的总和高度大于父母的高度

Question

在此实验中，第一个子节点仅由填充形成，而第二个子节点必须填充父容器的剩余空间。为了解决这个问题，我尝试使用calc()函数，我将第一个元素的填充顶部和填充底部的总和减去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设置为列。然后从第二个框中删除height属性并添加flex: 1 1 auto;。

请注意，我的示例中没有添加任何供应商前缀。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;