Search code examples

Tailwindcss: fixed/sticky footer on the bottom

I use tailwindCSS and confront a problem with make footer.


    {% include "partials/nav.html" %}

    {% block content %}
    {% endblock %}

    {% include "partials/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"> &copy~~~~~~</p>

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?


  • <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>

    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:

    enter image description here