CSS Sticky (But Not Fixed) Footer

Published on September 26, 2013.

For a recent web app project, I had to build a footer that would always stick to the bottom of page, using CSS only. My first instincts led me to the position: fixed; property, but it turns out the client didn’t want the footer visible at all times. They wanted it to behave as follows:

  • The footer should be visible if the content above it is shorter than the user’s viewport height.
  • If the content is taller than the user’s viewport height, then the footer should disappear from view and rest at the bottom of the page, as it would naturally.
  • This must be done without JavaScript, and without using the position: fixed; property (which would keep the footer at the bottom of the viewport at all times, regardless of the above content).

Below is a small pen demonstrating my solution, and it works fabulously. Feel free to use this method on your next project.

Leave a Comment