将项目推到其父项的底部，没有重叠？

Question

我有一个元素至少垂直延伸到整个视口（最小高度为 100vh）。这个元素有两个子元素，一个菜单项（基本上是一个格式化的链接列表）和另一个元素。

我想将后一个元素推送到父元素的底部，而不重叠菜单，跨越分辨率变化。

目前我正在使用位置绝对解决方案https://codepen.io/anon/pen/WGpyYa。但事实证明，“红色”元素可以在某些配置中与菜单重叠。

HTML & CSS 代码：

* {
  margin: 0;
}
.parentContainer {
  min-height: 100vh;
  background-color: yellow;
  position: relative;
}
.pushBottom {
  width: 200px;
  height: 300px;
  background-color: red;
  position: absolute;
  bottom: 0;
}

<div class="parentContainer">
  <ul>
    <li>foobar</li>
    <li>foobar</li>
    <li>foobar</li>
  </ul>
  <div class="pushBottom">
  </div>
</div>

如何将红色元素推到父“黄色”元素的底部，而不与菜单重叠？

谢谢！

Answer 1

如果您在父容器上使用flexbox，这很容易：

1. 删除red部分的绝对定位。

2. 将display: flex 添加到pushBottom 并使用flex-direction: column 垂直弯曲。

3. 使用justify-content: space-between 将pushBottom 保持在所有显示尺寸的底部。

* {
  margin: 0;
}
.parentContainer {
  min-height: 100vh;
  background-color: yellow;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.pushBottom {
  width: 200px;
  height: 300px;
  background-color: red;
}

<div class="parentContainer">
  <ul>
    <li>foobar</li>
    <li>foobar</li>
    <li>foobar</li>
  </ul>
  <div class="pushBottom">
  </div>
</div>

检查一下，让我知道您对此的反馈。谢谢！