fix navbar at the bottom of the screen while leaving space so it doesn't cover content
I have a navbar that I want to be fixed at the bottom of the screen. It should not move for any reason, including not having enough content to fill up the screen.
position: fixed solves this, but does not leave room at the bottom of the page, meaning that the navbar cuts off the bottom part of the content. The only solution I can seem to find for this is simply adding padding, but this seems like a hack, and I may need a different amount of padding on different devices. I could detect the height of the navbar on load and add that much padding, but it seems like there should be a solution with just CSS. Is there?
9 Replies
position: sticky solves the overlap problem (and is what I'm using in the above screenshot), but then this happens:
I'd also like to avoid excess blank area. e.g., simply setting the height of the main content div to
100% results in this (note the unnecessary scroll bar):
I would take the
sticky over fixed approach so the nav doesn't leave the document flow, that way you won't need js or magic numbers to figure padding out. i'd wrap everything in a flex container with and give the nav margin-top: auto; to push it to the bottom of the page. The flex container has min-width: 100vh; on it so the nav can actually be pushed to the bottom. To take care of the space between the content and the nav, i tested if there was a nav after an element (you should probably be more specific in your code to avoid clashes with other nav tags you may use) and gave it a margin-bottom. Bear in mind, if the main doesn't have enough content you will be left with some extra space of course, but since your nav will be at the bottom that wouldn't be an issue. There may be a better way, but hope this helps
https://codepen.io/deerCabin/pen/OJeLPYWunfortunately, that just causes this again, where there's excess scroll area.
is there a way that would just take up available space instead of the full height of the viewport?
yeah it does that, with
margin-top: auto;, theres no excess scroll area for me?what element is the
margin-top: auto; on?it's on the
nav. You should take a look at my codepen to understand what i'm talking about better
let me know if it works for youfunny, I swear I tried this exact thing before, and it didn't work lol
but yeah, it worked. Thanks!
no problem haha, glad it worked