Pin footer to bottom with CSS position: sticky

Here's a cool trick from Silvio Rosa that allows you to pin/stick the footer to the bottom of the page even when the page contains very little content.

In the past, I would have used flex to achieve this. I love the simplicity of Silvio's approach and will probably be using it from now on:

html, body { height: 100%;}

body > footer {
  position: sticky;
  top: 100vh;
}

Chris Coyier wrote more about Silvio's trick in more detail here.

Like this post? Got a question?

Reply via: Email, Bluesky, Mastodon, Twitter