Позиция абсолютная, но относительная

Question

В настоящее время я использую этот CSS, чтобы поместить div (.child_bottom) внизу его родителя и еще один div выше него (.child), потому что я знаю высоту (.child_bottom).

Родитель с переменной высотой.

.parent
{
  position:relative;
}

.child
{
  position:absolute;
  bottom:250px;
}

.child_bottom
{
  position:absolute;
  bottom:0;
  height:250px;
}

<div class="parent">

  <div class="child"></div>
  
  <div class="child_bottom"></div>

</div>

Но я бы хотел получить то же самое с переменной высотой .child_bottom, как это сделать?

Заранее спасибо за ваша помощь.

Answer 1

Использование flex позволит вам удалить все абсолютное позиционирование:

.parent {
  height: 400px;
  outline: 1px solid blue;
  
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.child {
  background: green;
}

.child_bottom {
  background: orange;
  height: 250px;
}

<div class="parent">

  <div class="child">CHILD</div>

  <div class="child_bottom">CHILD_BOTTOM</div>

</div>

Если вы сделали wi sh для добавления контента до .child, удалите justify-content и сделайте этот контент flex: 1:

.parent {
  display: flex;
  flex-direction: column;
  /* justify-content: flex-end; */
  height: 400px;
  outline: 1px solid blue;
}

.child {
  background: green;
}

.child_bottom {
  background: orange;
  height: 250px;
}

.other_content {
  background: yellow;
  flex: 1;
}

<div class="parent">

  <div class="other_content">
    OTHER_CONTENT (Fills the space)
  </div>

  <div class="child">CHILD</div>

  <div class="child_bottom">CHILD_BOTTOM</div>

</div>