html - 将一个元素推到其父级的底部，没有重叠？

Question

我有一个元素至少垂直延伸到整个视口(viewport)(最小高度为 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垂直 flex 。

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>

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