129

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?

Improve this question
0

19 Answers 19

Reset to default
286 
<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

Improve this answer
Sign up to request clarification or add additional context in comments.

10 Comments

This is quite a classy solution but if you want to apply page-wide classes with this setup (like background color) you need to set it for each element separately.
If the page is short in content .. it does not go very buttom
This is not a sticky footer, this is just a footer. If the content is taller than the screen then it just pushes the footer down. codepen.io/therms/pen/BaREVNN
@DustinWyatt Sorry, but this is exactly what a "Sticky Footer" is supposed to be. Google "Sticky Footers" "A sticky footer pattern is one where the footer of your page "sticks" to the bottom of the viewport in cases where the content is shorter than the viewport height."
Use min-h-screen instead. If you use h-screen and set the footer height (eg. h-20), when the height of the content overflows the screen, the footer's height isn't correct anymore!
|
136

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>

Improve this answer

2 Comments

flex-grow in TailwindCSS 3 is now: grow
As @Anh-Thi DINH pointed out in the answer above this using min-h-screen with grow seems to be the best answer at tailwind 3.4.x
65

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>

Replacing top-[100vh] with top-full works too. The former turns into top: 100vh, the latter is top: 100%.

codepen demo

Improve this answer

2 Comments

Didn't work for me.
@MariaCampbell does the codepen demo i linked to work?
41

use 'fixed' instead of 'static'

class="fixed bottom-0"

Improve this answer

3 Comments

how to add this property only when on mobile devices?
@Apoorvpandey I am quite new to tailwind CSS also, but here is the link to tailwind css document how to target mobile devices tailwindcss.com/docs/responsive-design#targeting-mobile-screens
This has a problem. The main content gets hidden by the footer on very small screens (iphone se for example)
28

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

Improve this answer

2 Comments

Thanks, this is the best solution.
you don't need to give min-h-screen (as it translates to min-height: 100vh) to html tag in this case unlike min-h-full (which requires doing this because it inherits height from parent)
16

Sticky Header and Footer

For a sticky header and footer regardless of content and screen size, do this:

<script src="https://cdn.tailwindcss.com"></script>

<div class="flex flex-col h-screen">
    <div class="z-50 bg-blue-200">header</div>
    <div class="grow bg-blue-100">content</div>
    <div class="z-50 bg-blue-300">footer</div>
</div>

Improve this answer

2 Comments

neither sticky nor bottom-0 is required in most cases.
Thanks @AhmadBilal. Just edited the answer to include your feedback!
11

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>
Improve this answer

Comments

7

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>

Improve this answer

Comments

4

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>
Improve this answer

1 Comment

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
3

While I avoided using display: grid for a long time, using it seems to be the simplest solution to date (compared to the flexbox solution):

<script src="https://cdn.tailwindcss.com"></script>

<!-- Wrapper element ('display: grid', 'grid-template-rows' defined) -->
<div class="min-h-screen grid grid-rows-[min-content_1fr_min-content] ">
  <header class="bg-blue-200">Header</header>
  
  <!-- Content element (display: grid) -->
  <main class="grid bg-blue-300">Content</main>
  
  <footer class="bg-blue-400">Footer</footer>
</div>

There are two key points:

  • min-h-screen, grid, and grid-rows-[...]have been applied to the wrapping element1. Considering grid-rows, an arbitrary value has to be used (Tailwind v3 offers only evenly distributed rows). The element that should take up all available space needs to have 1fr value; the rest is up to you (min-content might be the best choice).

  • The element that is supposed to take up all the available space needs to have grid class.

1Alternatively, instead of min-h-screen, h-full can be used, but it needs to be applied to all of the wrapping elements, starting with <html/>.

It is actually easier done than said. Take a look at the example above.

Improve this answer

Comments

3

The trick to getting this to work as expected is using flex-grow in your main content container.

<!-- Sticky Footer Wrapper -->
<div class="flex flex-col min-h-screen justify-between">

    <header class="p-4 bg-indigo-100">
        Header
    </header>

    <main class="flex-grow p-4 bg-amber-100">
        <section>
            <p class="h-20 outline">SHORT Content</p>
            <!-- <p class="h-[1000px] outline">LONG Content</p> -->
        </section>
    </main>

    <footer class="p-4 bg-rose-300">
        Footer
    </footer>

</div>
Improve this answer

1 Comment

This worked for me, except I used sticky bottom-0 on my footer
2

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.

Improve this answer

Comments

2

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>

Improve this answer

Comments

2

It's a lot simpler than what I'm seeing. Here's a sticky header and sticky footer. Always visible no matter how tall the content is:

<>
  <div className="sticky top-0 min-w-full">Header</div>
  <div className="min-w-full min-h-screen">SOME CONTENT</div>
  <div className="min-w-full min-h-screen">SOME CONTENT</div>
  <div className="fixed bottom-0 min-w-full">Footer</div>
</>
Improve this answer

Comments

2

Based on tailwind documentations, I used positionning like this:

<body>
  <div class="static min-w-full min-h-screen p-1">
    <p>content<p>
    <div class="absolute bottom-0 min-w-full">
      <p>foot</p>
    </div>
  </div>
</body>
  • static and absolute allow to position child (footer) relatively to parent (content)
  • min-h-screen tells the parent is as high as the screen
  • bottom-0 tells footer must be at the bottom of the parent
Improve this answer

Comments

0

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>
Improve this answer

Comments

0 
<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 .

Improve this answer

Comments

0

To avoid breaking a bg-gradient on the <body>:

<main class="min-h-screen"></main>
Improve this answer

Comments

0

for sticky to bottom inside an flex box container:

<div class="flex">
    <div class="sticky bottom-0 mt-auto">bottom sticky</div>
</div>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.