Roman Sorin

Sticky Footers

In most of my apps, I almost always want the footer at the bottom of the page.

This is really easy to accomplish:

  1. first, we make the actual page at least the height of the screen
  2. then, we move the footer to the bottom of the page with auto margin if there isn't enough natural content

With CSS

With a simple page like this,

<body>
  <div id="app">
    ... other content ...
    <footer id="footer" />
  </div>
</body>

our CSS looks like this:

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#footer {
  margin-top: auto;
}

With Tailwind

Tailwind makes it even easier.

<body>
  <div class="min-h-screen flex flex-col">
    ... other content ...
    <footer class="mt-auto" />
  </div>
</body>
Return home