Sticky Footer

gistfile1.scss

html, body { height: 100%; }

#container {
	min-height: 100%;
	margin-bottom: -12em; // Arbitrary. Must be the same as footer height.
	
	&:after { 
		content: "";
		display: block;
	}
}

.footer, #container:after {
	height: 12em;
}

/* 
I couldn't get this work, at first.
The thing is that you must wrap *all* content
except the footer in a container. I had originally
broken my HTML out into <header>, <div id="content">, and <footer>.
Applying the above just to #content doesn't work. Instead, it 
requires the following structure:

<div id="container">
 <header></header>
 <div id="content"></div>
</div> <!--/#container-->

<footer></footer>
*/