Измените размер минимальной высоты external-div (относительный pos) к высоте inner-div (абсолютный pos)

Question

Мне бы хотелось иметь пару элементов div, которые бы имели высоту окна просмотра.

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

Каждый из них содержит другие элементы div, и в случае, если содержимое выше высоты области просмотра, элемент fullheight должен увеличиваться. Хотя это хорошо работает, если div содержимого также «position: относительный», это не так, если я использую абсолютные позиции для внутренних 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>