将外部div（相对位置）的最小高度调整为内部div（绝对位置）的高度

Question

我想要几个div，它们至少是视口的高度。

.fullheight {
   position: relative;
   min-height: 100vh;
}

每个div中都包含其他div，并且如果内容比视口高度高，则fullheight div应该增加。 虽然内容div也是“ position：relative”，但效果很好，但如果我对内部div使用绝对位置，则不会。（我垂直使用居中）。

我整理了一个jsfiddle来说明我的问题（div2上的溢出）：jsfiddle

body {
  font-size: 5rem;
  margin: 0;
  padding: 0;
}

.fullheight {
  position: relative;
  min-height: 100vh;
  width: 100%;
}

.color1 {
  background-color: #3ff;
}

.color2 {
  background-color: #f3f;
}

.color3 {
  background-color: #ff3;
}

.content {
  position: absolute;
  width: auto;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  min-height: 100%;
}

<div class="fullheight color1">
<div class="content">
1
</div>
</div>
<div class="fullheight color2">
<div class="content">
2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 
</div>
</div>
<div class="fullheight color3">
<div class="content">
3
</div>
</div>

Answer 1

您可以将 flexbox 用于垂直居中（此处不要使用绝对定位，因为position: absolute将元素流量不足，这就是为什么您的身高有问题的原因。

在display: flex上添加align-items: center和fullheight-请参见下面的演示和updated fiddle：

body {
  font-size: 5rem;
  margin: 0;
  padding: 0;
}

.fullheight {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex; /* added */
  align-items: center; /* added */
}

.color1 {
  background-color: #3ff;
}

.color2 {
  background-color: #f3f;
}

.color3 {
  background-color: #ff3;
}

.content {
  /*position: absolute;*/
  width: auto;
  /*top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%); // */
  min-height: 100%;
}

<div class="fullheight color1">
<div class="content">
1
</div>
</div>
<div class="fullheight color2">
<div class="content">
2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 
</div>
</div>
<div class="fullheight color3">
<div class="content">
3
</div>
</div>