in Web & Tech

Responsive Sticky Footer with flexible height

Thanks a lot to Galen Gidman for sharing his solution to create Responsive, Flexible-Height Sticky Footers in CSS – works like a charm.

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).


<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%;
  /* 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%; 

Write a Comment


  • Related Content by Tag