How to Create Sticky Footer with CSS

A sticky footer is the footer of the web-page, which sticks to the bottom of the viewport when the content is shorter than the viewport height. This allows us to navigate a website easily and can be created with CSS.

Do not confuse a sticky footer with the "fixed" and "sticky" values of the position property.

Creating a sticky footer is quite easy. In this snippet, we will show some simple methods.

Let’s start with an example where we have negative margins.

Create HTML

  • Use two <div> elements with the following class names: "content" and "push".
  • Add a <footer> element with the class name "footer".
<div class="content">
  <h1>Sticky Footer</h1>
  <p>Example</p>
  <div class="push"></div>
</div>
<footer class="footer">
  Footer 
</footer>

Add CSS

html,
body {
  height: 100%;
  margin: 0;
}

.content {
  padding: 20px;
  min-height: 100%;
  margin: 0 auto -50px;
}

.footer,
.push {
  height: 50px;
}

* {
  box-sizing: border-box;
}

body {
  font: 16px Sans-Serif;
}

h1 {
  margin: 0 0 20px 0;
}

p {
  margin: 20px 0 0 0;
}

footer {
  background: #42A5F5;
  color: white;
  line-height: 50px;
  padding: 0 20px;
}

Let’s see the result of our code.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
      .content {
        padding: 20px;
        min-height: 100%;
        margin: 0 auto -50px;
      }
      .footer,
      .push {
        height: 50px;
      }
      * {
        box-sizing: border-box;
      }
      body {
        font: 16px Sans-Serif;
      }
      h1 {
        margin: 0 0 20px 0;
      }
      p {
        margin: 20px 0 0 0;
      }
      footer {
        background: #42A5F5;
        color: white;
        line-height: 50px;
        padding: 0 20px;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <h1>Sticky Footer</h1>
      <p>Example</p>
      <div class="push"></div>
    </div>
    <footer class="footer">
      Footer
    </footer>
  </body>
</html>

In the example above, we have a negative margin, which is equal to the height of the footer. The "push" class ensures that the negative margin won’t pull the footer up and cover content.

<!DOCTYPE html>
<html>
  <head>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
      .content {
        min-height: 100%;
      }
      .content-inside {
        padding: 20px;
        padding-bottom: 50px;
      }
      .footer {
        height: 50px;
        margin-top: -50px;
      }
      body {
        font: 16px Sans-Serif;
      }
      h1 {
        margin: 0 0 20px 0;
      }
      p {
        margin: 20px 0 0 0;
      }
      footer {
        background: #42A5F5;
        color: white;
        line-height: 50px;
        padding: 0 20px;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="content-inside">
        <h1>Sticky Footer</h1>
        <p>Example</p>
      </div>
    </div>
    <footer class="footer">
      Footer
    </footer>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      * {
        margin: 0;
      }
      html,
      body {
        height: 100%;
      }
      .wrapper {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        background-color: #9e9e9e;
        margin: 0 auto -142px;
      }
      .footer,
      .push {
        height: 142px;
      }
      .footer {
        background-color: #318ccc;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <h1>Sticky Footer</h1>
      <p>Example</p>
      <div class="push"></div>
    </div>
    <div class="footer">
      Footer
    </div>
  </body>
</html>

The methods presented above require footers with a fixed height. In web design, fixed heights are usually not encouraged as content can change. Whereas using Flexbox for a sticky footer does not require an extra element and allows us to use a varying height footer. Let’s see this method in use!

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        height: 100%;
      }
      body {
        display: flex;
        flex-direction: column;
        height: 100vh;
      }
      .content {
        flex: 1 0 auto;
        padding: 20px;
      }
      .footer {
        flex-shrink: 0;
        padding: 20px;
      }
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        font: 16px Sans-Serif;
      }
      h1 {
        margin: 0 0 20px 0;
      }
      p {
        margin: 0 0 20px 0;
      }
      footer {
        background: #42A5F5;
        color: white;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <h1>Sticky Footer with Flexbox</h1>
      <p>Example</p>
    </div>
    <footer class="footer">
      Footer
    </footer>
  </body>
</html>

In the example above, we used the flex property set to 1 on the child element that we want to grow to fill the content.

Next, we’ll show one more example where we create a sticky footer with Grid.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        height: 100%;
      }
      body {
        min-height: 100%;
        display: grid;
        grid-template-rows: 1fr auto;
      }
      .content {
        padding: 20px;
      }
      .footer {
        grid-row-start: 2;
        grid-row-end: 3;
      }
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        font: 16px Sans-Serif;
      }
      h1 {
        margin: 0 0 20px 0;
      }
      p {
        margin: 0 0 20px 0;
      }
      .footer {
        background: #42A5F5;
        color: white;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <h1>Sticky Footer with Grid</h1>
      <p>Example</p>
    </div>
    <footer class="footer">
      Footer
    </footer>
  </body>
</html>