使图像停留在页面底部，但不浏览内容

Question

我有一个徽标图像，应该保留在导航抽屉的底部。我知道把它放在底部的唯一方法是使用绝对和底部属性，但这会导致它与短设备上的列表项重叠(缩小浏览器窗口的高度，直到出现滚动条(。滚动条一出现，徽标就会出现在列表项目的顶部。

这是我的沙盒，里面有一个抽屉和随机的假图像：https://codesandbox.io/s/drawer-with-image-at-bottom-xpuhp

有没有一种方法可以在不使用绝对值的情况下从底部开始？和/或将其保持在底部，直到窗口高度需要滚动条，然后将其作为可滚动内容行为的一部分？如果这有道理的话。我曾经尝试过flex属性的变化，但我并不真正理解它。如果我删除absolute，它会从抽屉中最后一个列表项的下方开始，我需要它在底部，直到滚动条。

img的我的css：

logo: {
width: "220px",
height: "150px",
marginLeft: "50px",
marginRight: "50px",
bottom: "24px",
position: "absolute"
}

感谢

Answer 1

我要使用的是一个显示flex的包装器(在本例中为container类(。子项(列表和图像(应位于垂直轴上，因此使用flex-direction: column;使主轴垂直。因为你希望你的第一个孩子(你的列表(在开头，最后一个孩子在结尾(你的图像(，所以你可以使用justify-content: space-between;。这将平均分配您的项目，第一个项目在开始，最后一个项目在结束。Flex一开始可能很难理解，但它非常强大。一些可能有帮助的信息：

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox和https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

下面是我写的一个例子(打开一整页并调整大小以查看效果(：

html,
body {
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
/* You can leave this out or change it to 100% depending on your situation*/
width: 300px;
}

<div class="container">
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
<img src="https://www.placecage.com/300/200" alt="">
</div>

Answer 2

尝试将位置更改为相对位置，底部更改为-24px：

logo: {
width: "220px",
height: "150px",
marginLeft: "50px",
marginRight: "50px",
bottom: "-24px",
position: "realtive"
}

查看带有这些更改的代码沙箱链接。有了这个，你可以将底部属性调整到你认为合适的位置，把它放在你喜欢的底部多远。