DEV Community

Cover image for Sticky Footers
Roman Sorin
Roman Sorin

Posted on • Updated on • Originally published at romansorin.com

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>
Enter fullscreen mode Exit fullscreen mode

our CSS looks like this:

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

#footer {
  margin-top: auto;
}
Enter fullscreen mode Exit fullscreen mode

With Tailwind

Tailwind makes it even easier.

<body>
  <div class="min-h-screen flex flex-col">
    ... other content ...
    <footer class="mt-auto" />
  </div>
</body>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)