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:
- first, we make the actual page at least the height of the screen
- 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