位置绝对但相对

Question

目前我使用这个 CSS 在其 parent 的底部放置一个 div (.child_bottom) 并在其上方放置另一个 div ( .child) 因为我知道 (.child_bottom).

的高度

可变高度的parent。

.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>

位置绝对但相对

Position absolute but relatif

html

css

position

absolute