Move footer to bottom and make main full height with flexbox

[DanielRuf]

The pb7 trick is not that ideal. You can move the footer to the bottom with the following:

html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

footer {
    flex-shrink: 0;
}

See also https://css-tricks.com/couple-takes-sticky-footer/

[meghapsimatrix]

Hi where would I add this?

Here is the repository of the website that I am working on : https://github.com/meghapsimatrix/meta_sig_website
I am using the Ananke theme. I just noticed that the footer appears a bit above the bottom when I am using larger screens.

THANKS!

[DanielRuf]

Hi @meghapsimatrix,

is it still relevant? Because at meghapsimatrix/meta_sig_website@3eb1e6f you remove the footer.

I've just added the CSS code from the comment (and removed the old one for the footer) instead of using Tailwind.

[meghapsimatrix]

Hi @DanielRuf yes, thank you! I was trying to get the sticky footer to work like you suggested in your comment but couldn't last night. And, I was just trying to see what the site looks like without the footer. Thank you for your suggestion to remove the old one.

[meghapsimatrix]

I fixed it thank you!!