How to Make Your Website Footer Extend to the Bottom of the Page

I had a very common problem for which I could not find a good CSS solution. Namely, I wanted my website footer to extend to the bottom of the browser window, regardless of how much (or little) main body content I had.

What I wanted was this:

Footer extending to bottom of page

What I was getting was this:

Footer not extending to bottom of browser window

There are a lot of CSS solutions out there, but I couldn’t find one that did exactly what I needed, namely, having the footer extend to the bottom of the page.

You can use a sticky footer that’s always pushed to the bottom, but that’s not what I want. There are also some tricks using box shadow, but in my case, there was a background image to the footer, so a solid color fill would not suffice.

The JavaScript Solution

Given the choice, I try to avoid JavaScript solutions in favor of CSS whenever I can. But in this case, I couldn’t find a CSS solution (if you have one, let me know).

How it Works

The code figures out how far down the footer is from the top, and subtracts that from the total browser height. That is basically the new footer height, minus the padding in the footer.

There is also an adjustment for WordPress sites. When you’re logged in, there’s usually an admin bar which takes up 32 pixels. You can remove that part of the code if your site is not a WordPress site.

Finally, the code checks to see if any adjustment is necessary. If so, it adjusts the footer height.

And obviously, this code needs jQuery to be loaded.

Thoughts?

I’m sure it’s possible to optimize the code more but I was lazy and this gets the job done. Do you have an all-CSS solution though? Let me know in the comments below! – Brian

So it sounds like you don’t want the footer to BE at the bottom of the viewport, but to expand downward from just below the preceding content, and fill all the way to the bottom, is that right? If so, I don’t know how to do that. If you just want it to always be at the bottom of the viewport, it’s pretty easy using flex.

Copyright

Disclosure

This is a professional review site that receives compensation when you purchase through the affiliate links. I personally test or research each product before endorsing it. This site is independently owned and the opinions expressed here are my own.