Thanks a lot to Galen Gidman for sharing his solution to create Responsive, Flexible-Height Sticky Footers in CSS – works like a charm.
Update
Turned out this causes Firefox and Internet Explorer to ignore max-width: 100%
on images. To solve this we need to add table-layout: fixed;
to the body tag (CSS below updated).
Markup
<header class="page-row">
<h1>Site Title</h1>
</header>
<main class="page-row page-row-expanded">
<p>Page content goes here.</p>
</main>
<footer class="page-row">
<p>Copyright, blah blah blah.</p>
</footer>
CSS
html,
body {
height: 100%;
}
body {
display: table;
width: 100%;
/* Fix for Firefox and IE to keep correct max-width behaviour on images: */
table-layout: fixed;
}
.page-row {
display: table-row;
height: 1px;
}
.page-row-expanded {
height: 100%;
}