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

I have an a logo image that is supposed to remain at the bottom of a nav drawer. The only way I know to have it be at the bottom is with the absolute and bottom properties, but that's causing it to overlap the list items on a short device (shrink the height of the browser window until scroll bar appears). As soon as the scroll bars appear, the logo will go over top of the list items.

Here's my sandbox with a drawer and random fake image: https://codesandbox.io/s/drawer-with-image-at-bottom-xpuhp

Is there a way to start it at the bottom without using absolute? And/or a way keep it at the bottom until the window height necessitates scroll bars and then have it be part of that scrollable content behavior? If that makes sense. I've played around with variations of flex properties, but I don't really understand it. If I remove absolute it starts way up under the last list item in drawer and I need it at the bottom until scrollbar.

my css for the img:

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

thanks

CodePudding user response：

What I would use is a wrapper (in this example with the class container) that has a display of flex. The children (a list and your image) should be on the vertical axis, therefore use flex-direction: column; so your main axis is vertical. And because you want your first child (your list) at the beginning and your last child at the end (your image) you can use justify-content: space-between;. This will distribute your items evenly, with your first item at the start and last item at the end. Flex may be hard to understand at first, but it is very powerful. Some information that might help:

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

Here's an example of what I wrote about (open in a full page and resize to see the effect):

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 >
  <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>

CodePudding user response：

Try changing position to relative and bottom to -24px:

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

Check out the code sandbox link with these changes. With this you can then tweak the bottom property to whatever you see fit, placing it how far to the bottom you like.