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>
Top comments (0)