Tailwindcss: fixed/sticky footer on the bottom
CssDjangoTailwind CssCss Problem Overview
I use tailwindCSS and confront a problem with make footer.
base.html
<body>
{% include "partials/nav.html" %}
{% block content %}
{% endblock %}
{% include "partials/footer.html" %}
</body>
footer.html
<footer class="w-full h-64 bg-gray-900 static bottom-0">
{% load static %}
<img src="{% static "images/logo_white.png" %}" width="70px"> <p class="text-white"> ©~~~~~~</p>
</footer>
i tried static,absolute,fixed,relative... but .fixed cover the content block and relative make footer going upside. or .mb-0, .bottom-0 doesn't work.
is it possible make footer fixed on the bottom?
Css Solutions
Solution 1 - Css
<div class="flex flex-col h-screen justify-between">
<header class="h-10 bg-red-500">Header</header>
<main class="mb-auto h-10 bg-green-500">Content</main>
<footer class="h-10 bg-blue-500">Footer</footer>
</div>
Class justify-between is not required, but I would leave him (for other case).
So, play with h-screen and mb-auto classes.
And you get this UI:
Solution 2 - Css
Another approach would be using flex-grow.
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css" rel="stylesheet"/>
<div class="flex flex-col h-screen">
<div class="bg-red-500">header</div>
<div class="bg-green-500 flex-grow">content</div>
<div class="bg-blue-500">footer</div>
</div>
Solution 3 - Css
use 'fixed' instead of 'static'
class="fixed bottom-0"
Solution 4 - Css
Another way that was recently discovered by Sílvio Rosa uses position: sticky + top: 100vh on the footer. The way to achieve this with TailWindCSS is...
<html class="min-h-screen">
<body class="min-h-screen">
<header>Header</header>
<main>Content</main>
<footer class="sticky top-[100vh]">footer</footer>
</body>
</html>
You can read the full article on CSS Tricks here
Solution 5 - Css
A solution without using margin:
.as-console-wrapper {
display: none !important; /* just to hide stackoverflow console warning */
}
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-col min-h-screen">
<header class="bg-yellow-600">content</header>
<div class="bg-blue-600">content</div>
<div class="flex-1"></div> <!-- here -->
<footer class="bg-red-400">footer</footer>
</div>
Another so clever solution is using sticky top-[100vh] for footer. by Chris Coyier
.as-console-wrapper {
display: none !important; /* just to hide stackoverflow console warning */
}
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-col min-h-screen">
<header class="bg-yellow-600">content</header>
<div class="bg-blue-600">content</div>
<footer class="bg-red-400 sticky top-[100vh]">footer</footer>
</div>
Solution 6 - Css
This has been a major pain for me recently. I ended up solving this without flex, I simply gave my body a min-height of 75vh and it seems to have produced the desired result.
Solution 7 - Css
Use the h-[100vmin] custom class on the first div inside your layout component, typically as follows:
<Layout>
<div class="container">
<div class="h-[100vmin]">
...
</div>
</div>
</Layout>
Solution 8 - Css
New solution in 2022. Tailwindcss version 3.0.24 in codepen demo.
<div class="h-screen">
<div>Content</div>
<div class="sticky top-[100vh]">Footer</div>
</div>