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

概述我有一个元素至少在整个视口中垂直延伸(最小高度为100vh).这个元素有两个子元素,一个菜单项(基本上是一个格式化的链接列表)和另一个元素. 我希望将后一个元素推送到父元素的底部,而不会重叠菜单,跨越分辨率更改. 现在我使用位置绝对解决方案https://codepen.io/anon/pen/WGpyYa.但事实证明,“红色”元素可以在某些配置中与菜单重叠. HTML& CSS代码： * { 我有一个元素至少在整个视口中垂直延伸(最小高度为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 >  <ul>    <li>foobar</li>    <li>foobar</li>    <li>foobar</li>  </ul>  <div >  </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 >  <ul>    <li>foobar</li>    <li>foobar</li>    <li>foobar</li>  </ul>  <div >  </div></div>

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

总结

以上是内存溢出为你收集整理的html – 将项目推到其父项的底部,没有重叠？全部内容，希望文章能够帮你解决html – 将项目推到其父项的底部,没有重叠？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。