HELP: How to keep the footer down?

[bythemeadow]

so if i have my footer and my mainpage set as position:static; then it renders in order, showing the footer at the very bottom with a slight margin. easy. my problem is that the mainpage element has to have position:absolute; or else the nav buttons i built aren't selectable (they are placed underneath the main div and stick out from the side, like a bookmark.) i'm not sure why this is but it wouldn't be a problem if it didn't affect the footer. the mainpage either covers the footer or it renders halfway up the page. how do i fix this?

[Melooon]

Its a little hard to figure out exactly what your issue is, BUT a thread light this might be helpful?
https://stackoverflow.com/questions/44258085/css-how-to-attach-footer-to-the-bottom-of-the-page

When you set something as position absolute, it no longer takes up space on the page so the footer will no longer move down to avoid it. So you need to make something take up that space.

You could make an invisible div that is full height, then set pointer events none on it https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
You could also try playing with the z-index to make it behind everything else https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Those might also be helpful for figuring out your navbar or footer issues ^^

[bythemeadow]

oh this is perfect, thank you! i didn't know that about position:absolute, good to know :]

[MamboGator]

In general, it's better if you can find a way around using absolute positioning to begin with. I know all too well the temptation to use "position: absolute" because it's the easiest way to put something exactly where you want it, but using a grid or flex box is usually the better option because it'll naturally work with the rest of your layout.

Alternatively, you could use "position: fixed" on the footer so that it is always floating on the bottom of the screen, but without seeing your design it's hard to say if that would work for you.

[bythemeadow]

In general, it's better if you can find a way around using absolute positioning to begin with. I know all too well the temptation to use "position: absolute" because it's the easiest way to put something exactly where you want it, but using a grid or flex box is usually the better option because it'll naturally work with the rest of your layout.

Alternatively, you could use "position: fixed" on the footer so that it is always floating on the bottom of the screen, but without seeing your design it's hard to say if that would work for you.

i've heard this a couple times, i'll look into it