How can I stack a div on top of my main content without it rendering extra space on the bottom?
I have a dumbed down example of what I need below, but I basically want a floating sticky navigation bar based off the bottom of the view port. I tried a few basic things but it's my fundamental lack of experience in css that's stopping me from figuring it out. Usually I'm keen on getting things myself but I've been looking for a couple days now on and off on this issue but can't seem to resolve it. I am using react for this project but still vanilla js/css so that shouldn't change much.
Looking at the image, the "Some content" is 100vh and so the bottom bar is causing me to have to scroll a little. I want the bottom bar to be floating approx 5rem from the bottom and positioned on top (in terms of z axis) of the "some content" so that there would be no awkward extra little scroll. I am using react for this project but still vanilla js/css so that shouldn't change much. Basic code thusfar: (I know I have some tailwind but again, vanilla is fine I can convert between the two np) Note the extra space in scroll bar
Looking at the image, the "Some content" is 100vh and so the bottom bar is causing me to have to scroll a little. I want the bottom bar to be floating approx 5rem from the bottom and positioned on top (in terms of z axis) of the "some content" so that there would be no awkward extra little scroll. I am using react for this project but still vanilla js/css so that shouldn't change much. Basic code thusfar: (I know I have some tailwind but again, vanilla is fine I can convert between the two np) Note the extra space in scroll bar
5 Replies
take a look at the and css properties, which will let you position an element relative to the viewport, for example using
That was one of the things I tried but I still get that annoying space on the bottom (as big as my floating bar is)
use
position: fixed instead of sticky, which will pull it out of the flow and not "save" that space for itHi kevin! Pleasure seeing you. That does fix the issue. How can I align it to the center? of the screen
Update: I got it, just made the width 100% and that fixed it
Final result: