DEV Community

Making a footer stick to the bottom with CSS

Chris Bongers on December 26, 2020

Ever wanted to have a footer that's stuck to the bottom, but will push down if the content is bigger? To demonstrate I've created this image. W...

Read full post

Peter Dietrich • Dec 26 '20 • Edited

In some cases, I recommend to use height 100% instead of 100vh as vh might cause issues with the chrome nav bar on mobile

Chris Bongers • Dec 27 '20

Ah good point Peter! Didn't account for that indeed.
There is a fix for the 100vh on mobile though.

Peter Dietrich • Dec 27 '20

Oh - can you elaborate on that fix?

Chris Bongers • Dec 28 '20

Sure CSS-tricks has a very good article on that:
css-tricks.com/css-fix-for-100vh-i...

Ertan Kara • Dec 26 '20 • Edited

This was a thing that I dealt with a few weeks back on my own blog. I fixed it with JS but I was ashamed of the solution. Thanks for this, I will apply this one instead of following.

(() => {
  if (window.innerHeight >= document.body.scrollHeight) {
    document.querySelector('footer').classList.add('fixed-footer')
  }
})();

Chris Bongers • Dec 27 '20

Hi Ertan, It's cool you found your own solutions as well, it's what we do as developers.
There are always different quicker solutions.

Tobias Nickel • Dec 27 '20

is there some reason not to use position: fixed anymore?

Chris Bongers • Dec 27 '20

You can however in this example I didn't want the footer to be always visible, which it would be with fixed.

It's a different solution and imagines those big-ass footers these days, don't want that as a fixed block.

Tobias Nickel • Dec 27 '20

thanks

maxloh • Dec 27 '20

Margin collapsing won't work on a flexbox based layout.

I think I will stick to the old fixed footer way and add a empty div to occupy spaces for the footer.

Chris Bongers • Dec 27 '20

What exactly do you mean by margin collapsing? in which sense?

Edson Jr. • Dec 27 '20 • Edited

What about the position sticky? Today its browser support is more than 95%.

Chris Bongers • Dec 27 '20

Sticky is a valid solution same as fixed.
Just remember the footer will always be visible, which I didn't want for this example.

If that's what you want it's a propper solution though!

Edson Jr. • Dec 27 '20

Perfect!

akshay_magrani • Dec 27 '20

Thats a good idea Edson Jr.! How will you account for the footer that keeps being visible on the bottom of your screen though?

Andrew Schimelpfening • Dec 27 '20

This is great, thanks for sharing! I’ll try to use this in my next project.

Chris Bongers • Dec 28 '20

Awesome Andrew, if you want to you can share the end-result always cool to see what people use it for 🤟

Habdul Hazeez • Dec 28 '20

How to create a sticky Website footer in 5 different ways

Habdul Hazeez ・ Jun 30 ・ 6 min read

#css #webdev #html #javascript