我有一个元素至少垂直延伸到整个视口(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>
如何将红色元素推到父“黄色”元素的底部,而不与菜单重叠?
谢谢!
最佳答案
如果您在父容器上使用 flexbox
,这很容易:
移除
red
部分的绝对定位。将
display: flex
添加到pushBottom
,并使用flex-direction: column
垂直 flex 。使用
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>
检查一下,让我知道您对此的反馈。谢谢!
关于html - 将一个元素推到其父级的底部,没有重叠?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39682340/