0
554
ViewsTailwindcss: fixed/sticky footer on the bottom
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?
5 answers
Answer question0
<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:
0
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>0
use 'fixed' instead of 'static'
class="fixed bottom-0"
0
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>0
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.