html – 将项目推到其父项的底部,没有重叠？

2019年7月28日 212次阅读

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

如何在不重叠菜单的情况下将红色元素推到父“黄色”的底部？

谢谢！

最佳答案 如果您在父容器上使用flexbox,这很容易：

>删除红色部分的绝对定位.
>添加显示：flex到pushBottom并使用flex-direction：列垂直弯曲.
>使用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>

看看这个,让我知道你对此的反馈.谢谢！

点赞