Push footer to the bottom of the HTML page even if the content does not reach the bottom

[RedCoder]

Question:
In HTML and CSS, I’d like to push a footer to the bottom of the HTML page even if the content does not reach the bottom.

Repl link: WorldCache on Replit

[CoderElijah]

Try this. Note that you’ll have to put some padding otherwise the footer will cover up any content at the bottom of the page.

[RedCoder]

I have already tried adding position: fixed; to my footer and it did not change anything. It is currently commented out, though.

[QwertyQwerty88]

Basically what’s happening is that your footer IS at the bottom – of the body/html. And the body/html might not be big enough to fill the whole viewport.

So just add this

html, body {
  height: 100vh;
}

[RedCoder]

I would’ve thought this would work, but still no luck

[QwertyQwerty88]

Opened your site in a new tab, messed around in devtools, and got it working:

Then I looked in your CSS and the code I gave you was commented out

So uncomment that!

Then I saw that position: fixed; was also commented out…

So uncomment that too.

Anyway the reason it’s not sticking to the bottom is cause you didn’t tell it to with bottom: 0;.

[RedCoder]

Got it! I commented the code out temporarily until you responded again so I can continue to add code without any unwanted results.

[boston2029]

I was actually looking for this a while ago too!