位置绝对但相对答案

【问题标题】：Position absolute but relatif位置绝对但相对
【发布时间】：2020-04-27 20:45:33
【问题描述】：

目前我使用这个 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的可变高度获得同样的东西，怎么办？

提前感谢您的帮助。

【问题讨论】：

.child之前会有内容吗？
.child 之前没有内容，但.parent 的高度可变。
flexbox 是要走的路 .. 找不到重复的 ..

标签： html css position absolute

【解决方案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>

【讨论】：