Keep footer with variable height on bottom

Spread the love

Question Description

This question already has an answer here:

I need to keep a footer on bottom, but its height is variable so main solutions are not suitable for me…

examples of what I can’t do:

Anyone have a solution for flexible footers?

Practice As Follows

2014 UPDATE: The modern way to solve this layout problem is to use the flexbox CSS model. It’s supported by all major browsers and IE11+.

Here’s a solution for sticky footer of flexible height using divs with display: table-row:

html, body {
  height: 100%;
  margin: 0;
.wrapper {
  display: table;
  height: 100%;
  width: 100%;
  background: yellow;
.content {
  display: table-row;
  /* height is dynamic, and will expand... */
  height: 100%;
  /* content is added (won't scroll) */
  background: turquoise;
.footer {
  display: table-row;
  background: lightgray;


What needs to be noted is that CSS was designed to layout documents, not web application screens. The CSS display: table properties are very valid though, and are supported in all major browsers. This is not the same as using structural tables for layout.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.