Timothy Long

Creating a Responsive and Sticky Footer

February 21, 2013

Recently, I encountered a couple of projects that required a responsive adaptation of the age-old CSS sticky footer and was surprised to note how little had been written on the subject.

As an afterthought to several tried and true methods^[1][2] of creating sticky footers, I wanted to make something that would support a varying footer height in a responsive layout.

I found some success with the following method:

<section class="container">
	<header class="block"></header>
	<div class="block push"></div>
	<footer class="block"></footer>
</section>

The CSS:

html, body {
	height: 100%;
}
.container {
	display: table;
	height: 100%;
}
.block {
	display: table-row;
	height: 1px;
}
.push {
	height: auto;
}

Demo it.
Download the snippet on Github.

1. http://www.cssstickyfooter.com
2. http://ryanfait.com/sticky-footer