Have item always on bottom without overlapping other content

I desire two things:

1. I want a button which is always at the bottom of the screen. No matter how many content there is.
2. The button should come after the content, without overlapping it.

For 1), the following makes sense:

button: {              position: "fixed",              bottom: 0          }  

But I do not know how to achieve 2 with this setup, any margin/padding will be ignored. Here are images showcasing what I mean:

1. Button on the bottom, even if there is less than fullscreen content:

And 2) Unwanted behaviour: Button floats over other content, instead of being placed below of it

I just shrinked the browser window here, the same result would've happened if I had more "cards" on the fullscreen. I am quite certain that this is not a responsive issue, since I am using Material UI under the hood which comes with full responsiveness

https://stackoverflow.com/questions/65407921/have-item-always-on-bottom-without-overlapping-other-content December 22, 2020 at 07:29PM