Footer does not stick to the bottom when contents are short or absent

So I have a site where the footer seems to not stay at the bottom, but immediately below the content, and the rest of the page just shows the background, is there anyway to fix this anyhow? Thanks.

Site: https://catches.github.io/
Source: GitHub - catches/catches.github.io: ✨ Build a beautiful and simple website in literally minutes. Demo at https://beautifuljekyll.com

this is a css thing, google sticky footer and you should see something.

Basically you need to use flexbox with the content set to flex: 1 so it expands? something like that.

Perhaps if everything else about the current html layout and css was changed. A quick test showed that doing “display: flex” on the body tag of current implementation completely messes up the page. I honestly just don’t think there is a good general all-purpose solution to this that just works.

if that is all you did then it won’t work. You need a container set to flex and then the content gets flex:1 to expand and take up any extra room.

What I have in the link and the little explanation of how it works does work, I do that on every site I have.

I think you might also have to do height: 100vh on the body?