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?

87528 次浏览
小开
最佳答案 
<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:

enter image description here

小开

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>

小开

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.

小开

use 'fixed' instead of 'static'

class="fixed bottom-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="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>

小开

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

小开

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>
小开

New solution in 2022. Tailwindcss version 3.0.24 in codepen demo.

<div class="min-h-screen">
<div>Content</div>
<div class="sticky top-[100vh]">Footer</div>
</div>

codepen demo

小开

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>
小开 
<footer class="absolute bottom-0 w-full px-6 py-6 text-white bg-emerald-500">

I think you can just use absolute bottom-0 to locate it, w-full to fill the width, and px and py to size your footer .

小开

I'm using this:

<div class="min-h-screen flex flex-col justify-start">
<div>your main content</div>
<footer class="mt-auto">
<div>your footer content</div>
</footer>
</div>
小开

The best answer that I have seen was to set container, containing the footer, to screen height ('min-h-screen') and make it a flexbox ('flex') and set the element above the footer to flex-1 so that it would consume all the spaces and push the footer below.

In your code, it would look like these:

<body class='flex flex-col min-h-screen'>
{% include "partials/nav.html" %}
<div class='flex-1'>
{% block content %}
{% endblock %}
</div>
{% include "partials/footer.html" %}
</body>

Here's a sample code for my use-case: 

<div className='flex flex-col min-h-screen'>
<div className='flex-1 mx-24 mt-12'>
<Header />
<div className='grid grid-cols-4 gap-12 my-12'>
{data.map( (item, i) => <Todo key={i} title={item.title} note={item.note} texts={item.texts}/>)}
</div>
</div>
<Footer />
</div>


提交答案