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

120
February 17, 2022, at 1:20 PM

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

Answer 1

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

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.

Rent Charter Buses Company
READ ALSO
How to enable a select dropdown element once the first dropdown element value has been chosen (with CSS)

How to enable a select dropdown element once the first dropdown element value has been chosen (with CSS)

I've seen multiple ways involving JS/Jquery that allow enabling a second select element (from a disabled state) once the first select element option has been chosen, but I am wondering if anyone can share how to accomplish this with CSS

144
Overlaying an image while scrolling

Overlaying an image while scrolling

If you look at the picture attached you can see a picture of a person then a white space with a border radiusI wanted to know if there is a way while scrolling down for the white space the overflow the image, and while scrolling up to show the image again

95
How to fix a SCSS to CSS Error: Funtion backgroud

How to fix a SCSS to CSS Error: Funtion backgroud

This is a massive themescss

139
I am not able to add custom CSS to the scroll bar that i have created in a Card component in MUI react

I am not able to add custom CSS to the scroll bar that i have created in a Card component in MUI react

When I create a custom styles for the scroll bar by importing makeStyles function and store that under the useStyles hook and when I fire that hook and store it under classes, and finally use that classes inside class name of Card component, I see scrollbar...

152