9/26/2016 - 10:04 PM

Responsive Flexible Height Sticky Footers

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>

<main class="page-row page-row-expanded">
  <p>Page content goes here.</p>

<footer class="page-row">
  <p>Copyright, blah blah blah.</p>
body { height: 100%; }

body {
  display: table;
  width: 100%;

.page-row {
  display: table-row;
  height: 1px;

.page-row-expanded { height: 100%; }