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

Question

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

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

有没有办法不使用absolute从底部启动呢？ And/or 一种方法是将它保持在底部，直到 window 高度需要滚动条，然后让它成为可滚动内容行为的一部分？如果这是有道理的。我玩过 flex 属性的变体，但我并不真正理解它。如果我删除 absolute 它会在抽屉中的最后一个列表项下开始，我需要它在底部直到滚动条。

我的 css 为 img:

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

谢谢

Answer 1

尝试将位置更改为相对位置并将底部更改为 -24 像素：

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

查看 code sandbox link 的这些更改。然后，您可以将底部属性调整为您认为合适的任何位置，将其放置在您喜欢的底部。

Answer 2

我要使用的是一个显示 flex 的包装器（在本例中为 class container）。 children（一个列表和你的图像）应该在 垂直轴上 ，因此使用 flex-direction: column; 这样你的主轴就是垂直的。因为您希望第一个 child（您的列表）在开头，最后一个 child 在结尾（您的图像），您可以使用 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>

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

Making an image stay at the bottom of the page but not go over content

css

flexbox

reactjs

material-ui