Responsive Flexible Height Sticky Footers
<!--
The only real caveat to this solution that I’ve encountered so far is the styling limitations present with elements using display: table-row.
Often padding, margin, etc. don’t behave as expected. This is easy enough to work around by adding a <div> or something inside the .page-row and styling that:
-->
<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>
html,
body { height: 100%; }
body {
display: table;
width: 100%;
}
.page-row {
display: table-row;
height: 1px;
}
.page-row-expanded { height: 100%; }