Footer not extending to bottom of browser window

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
Footer extending to bottom of page

What I was getting was this:

Footer not extending to bottom of browser window
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).

Here’s what I came up with:

How it Works

In the corresponding HTML, “footer.site-footer” is the footer.

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



3 thoughts on “How to Make Your Website Footer Extend to the Bottom of the Page

  1. 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.

    1. Hi Josh,

      Yes, correct. I want the footer to extend and fill all the way to the bottom. Thanks for the tip about flex though; that might be what someone else needs.

      Brian

Leave a Comment or Ask a Question

This site uses Akismet to reduce spam. Learn how your comment data is processed.