Menu
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?
810
In Tailwind CSS, you can implement a fixed footer navigation menu by combining the fixed utility class with the bottom-0 (set bottom position to 0) and left-0 (set left position to 0) utility classes.
Use the WPFront Notification Bar Plugin To enable the floating footer bar, select the option to fix the bar at the bottom position. What is this? Change the position from “top” to “bottom”. Check the box to enable “fixed at position” which is what fixes it to the bottom of the screen.
<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:
162
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
