Absolutely positioned footer with flexible height

We want our footers at the bottom, right? That’s easy enough to do with absolute position and extra padding on the preceding element. But it requires that we set an absolute height on the footer. That’s no fun. So what to do?

Why not set the padding of the preceding element dynamically based on the height on the footer with JavaScript? Yes! Let’s do it.

Here is the basic css for absolutely positioned footer

/* #everything wraps header, main and footer */
#everything {
	min-height: 100%;
	position: relative;
header {
	[block element whatever you want]
main {
	position: relative; overflow: hidden; 
	padding-bottom: 80px; /* Remove this, we'll be manipulating it with JS*/	
footer {
	position: absolute;
	bottom: 0; 
	left: 0;
	width: 100%; 

And then we have to do make the padding responsive. I’m using jQuery here. You have to do this when the page loads and when the page is resized.

$("main").css("padding-bottom", $("footer").height() );

I won’t go in to how you build efficient resize event handlers here. There is a lot of info about it online. Just to mention a little thing, you need to debounce which essentially means that you need a delay that prevents your function from running on every pixel change. For most resize events you only want them to run once after all resizing has stopped.

Good luck and happy coding!