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:

jQuery(document).ready(function() {
		
	// ----------------------------------------------
	// MAKE FOOTER EXTEND TO BOTTOM OF BROWSER WINDOW
	// NOTE: NEED TO HIDE WORDPRESS SMILEY IN JETPACK
	// ----------------------------------------------
	var browserHeight = window.innerHeight;
	var footerOffset = jQuery('footer.site-footer').offset();
	var footerHeight = jQuery('footer.site-footer').outerHeight();
	
	var footerPadding = footerHeight - jQuery('footer.site-footer').height();
		
	// CORRECT FOR PADDING IN THE FOOTER
	var newFooterHeight = browserHeight - footerOffset.top - footerPadding;
	
	// THIS IS NEEDED FOR WORDPRESS ONLY, WHEN YOU'RE LOGGED IN TO HIDE GAP AT BOTTOM
	if ( jQuery('body').hasClass('logged-in') )
		newFooterHeight += 32;

	// ADJUST THE FOOTER HEIGHT
	if ( (footerOffset.top + footerHeight) < browserHeight )
		jQuery('footer.site-footer').height(newFooterHeight);
		
});

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

Shares

Please Leave a Question or Comment

Subscribe
Notify of
guest

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

11 Comments
Inline Feedbacks
View all comments
stacksole
4 days ago

Thanks, Brian for sharing such an informative article.

Digifloggin
1 year ago

Thank you so much for the script.

Mejour Digital
2 years ago

Just came across your article through a friend of mine. You’re a gem dude. Thanks, Brian for sharing such an informative article. I was actually looking for a solution for my own website’s footer and I found your article really helpful.

Thanks again.

Stymeta Technologies
4 years ago

Thanks for this script. Stumbled upon this while working on a website for client with very less information on homepage. The footer always use to come a few pixels above. Thank you very much for the solution

vinay pandey
5 years ago

This post helped me a lot while i was having issue when designing website with footer flexibility Thanks for this post,it was very helpful.

samwebstudio
5 years ago

There are lots of cool and interesting thing in the list that we can use for our website footers. Thank for sharing the post with us

Josh
5 years ago

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.