'Tailwindcss: 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"> &copy~~~~~~</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?

cssdjangotailwind-css


Solution 1:[1]

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 2:[2]

use 'fixed' instead of 'static'

class="fixed bottom-0"

Solution 3:[3]

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 4:[4]

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 5:[5]

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 6:[6]

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 7:[7]

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>

codepen demo

Solution 8:[8]

None of the solutions here worked for me since my component wasn't a layout component. I wanted a sticky footer to appear on just a single page and it needed to ignore the margins and padding of parent containers. Here's the tailwind solution that worked for me:

        <div className="fixed bottom-0 left-0 bg-red-500 w-screen h-12">
          Sticks to bottom, covers width of screen
        </div>

Solution 9:[9]

<< footer className="absolute bottom-0 w-full px-6 py-6 text-white bg-emerald-500" >>

i think you can just used absolute bottom-0 to locate it and w-full to fill the width and px and py to size your footer

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 hyukkyulee
Solution 3
Solution 4
Solution 5 IVR
Solution 6
Solution 7 shrekuu
Solution 8 jfunk
Solution 9

Related Questions