位置绝对但相对

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>

如果你想在之前添加内容 .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>