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:

What I was getting was this:

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

Brian Shim

I am a freelance web developer and consultant based in Santa Monica, CA. I’ve been designing websites using WordPress and from scratch using HTML, CSS, PHP, and JavaScript since 2010. I create websites and web applications for businesses, nonprofits, and other organizations. I have a degree in Electrical Engineering (BSEE) from California Institute of Technology and a degree in Engineering Management (MSEM) from Stanford University.

brianshim.com