Sticky CSS Footer

Here’s how you should (or can) do a sticky CSS Footer.

Assuming the HTML looks something like this (and everything non footer is inside the “content” div)

<!DOCTYPE html>
  <title>Sticky Footer</title>
  <div class="content">&nbsp;</div>
  <footer>&copy; 2016</footer>

The easiest way to make the footer stick to the bottom would be to use some CSS like

body {
    margin: 0; /* If not already reset */

.content {
    min-height: calc(100vh - 20px);

footer {
    height: 20px;

This makes the “content” div take the minimum vertical height of the entire screen, minus 20 pixels (the fixed height of the footer).

Most of the search results when Googling “sticky CSS footer” are half a decade old, but this is how a sticky CSS footer should be easily implemented in 2016.