DEV Community

Cover image for Making a footer stick to the bottom with CSS
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

Making a footer stick to the bottom with CSS

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.

CSS Sticky footer

What this illustrates is the following:

  • left: Green box is the viewport, yellow is the content which is very small, and the pink footer is stuck to the bottom
  • right: Content is larger than the viewport so it pushed the footer down as well.

For this specific problem, there are quite a few solutions, which all have their pros and cons.

I'll just be demonstrating two of them since I think they are the most mainstream ones.

Those will be:

CSS flexbox sticky footer

With flex, we can easily achieve this sticky footer effect by expanding our content section.

What this means is that we set our body to be a flex element, and the content part will have the flex: 1 0 auto value.

This value forces the content to expand as the biggest element, so if we have a small content area it will auto expand to fill the space.

The HTML structure we will be using for this:

<div class="content">
  Content goes here
</div>
<footer>
  I'm a sticky footer
</footer>
Enter fullscreen mode Exit fullscreen mode

Now let's first add a flex property to our body:

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
Enter fullscreen mode Exit fullscreen mode

This tells our body to become a flex element, which flexes elements vertically.
Then we make the minimum height based on the viewport.

Then all we have to do is add the following property to our content div.

.content {
  flex: 1 0 auto;
}
Enter fullscreen mode Exit fullscreen mode

That line will force the content block to space out between the content and the footer.

You can see this method in action on the following Codepen.
You can use the button to toggle between no text and a lot of text.

CSS grid sticky footer

Now for the grid is a very similar setup, we can actually use the same HTML for this method.

<div class="content">
  Content goes here
</div>
<footer>
  I'm a sticky footer
</footer>
Enter fullscreen mode Exit fullscreen mode

Now for our body we can use the following setup:

body {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
}
Enter fullscreen mode Exit fullscreen mode

This will tell our body to behave like a grid and have 2-row setups where the first one will use 1fr which means 1 fraction unit.

It comes down to the content expanding whatever it needs or can fill, and the footer being auto, which means it will take how the size of the copy in the footer.

Then we don't even need any styling for our content div.

This result in the following:

Again you can click the button to toggle the copy.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (18)

Collapse
 
xosofox profile image
Peter Dietrich • 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

Collapse
 
dailydevtips1 profile image
Chris Bongers

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

Collapse
 
xosofox profile image
Peter Dietrich

Oh - can you elaborate on that fix?

Thread Thread
 
dailydevtips1 profile image
Chris Bongers

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

Collapse
 
ertankara profile image
Ertan Kara • 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')
  }
})();
Enter fullscreen mode Exit fullscreen mode
Collapse
 
dailydevtips1 profile image
Chris Bongers

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.

Collapse
 
bias profile image
Tobias Nickel

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

Collapse
 
dailydevtips1 profile image
Chris Bongers

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.

Collapse
 
bias profile image
Tobias Nickel

thanks

Collapse
 
maxloh profile image
maxloh

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.

Collapse
 
dailydevtips1 profile image
Chris Bongers

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

Collapse
 
727021 profile image
Andrew Schimelpfening

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

Collapse
 
dailydevtips1 profile image
Chris Bongers

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

Collapse
 
ed1nh0 profile image
Edson Jr. • Edited

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

Collapse
 
dailydevtips1 profile image
Chris Bongers

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!

Collapse
 
ed1nh0 profile image
Edson Jr.

Perfect!

Collapse
 
akshay_magrani profile image
akshay_magrani

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

Collapse
 
ziizium profile image
Habdul Hazeez