Basic Sticky Footer

by Scott Kaye

HTML

<header>
	Some header that is magically included in the table-row calculation.  This can be any height as well.
</header>

<div id="content">
	This is the content.  The whole page goes in here, though the header can be before.
</div>

<footer>
	This is a footer with dynamic height!
</footer>

CSS

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
}

body {
	display: table;
}

#content {
	display: table-row;
	height: 100%;
	background: red;
}

/* Some browsers will not print correctly with these styles.  Disable them when printing! */
@media print {
	body, #content { display: block; }
}