使图像停留在页面底部但不越过内容

Question

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

这是我的带有抽屉和随机假图片的沙箱：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"
    }

查看code sandbox link 的这些更改。有了这个，您可以将底部属性调整到您认为合适的任何位置，将其放置到您喜欢的底部多远。