Question

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

我希望将后一个元素推送到父元素的底部，而不会重叠菜单，跨越分辨率更改。

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

HTML＆amp; 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，这很容易：

删除red部分的绝对定位。
将display: flex添加到pushBottom并使用flex-direction: column垂直展开。
使用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>

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

将项目推送到其父项的底部，不重叠？

1 个答案: