236

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

Dmitry S.

[Django]-Is it possible to generate django models from the database?

113

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>

ffx14

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

shrekuu

use ‘fixed’ instead of ‘static’

class="fixed bottom-0"

hyukkyulee

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

Oneezy

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>

jfunk

Sticky Header and Footer

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

<div class="flex flex-col h-screen">
    <div class="sticky top-0 z-50">header</div>
    <div class="grow">content</div>
    <div class="sticky bottom-0 z-50">footer</div>
</div>

Jorge Garcia

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>

doğukan

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.

IVR

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>

Pawel Debik

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>

Kathulhu

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 element¹. 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.

¹Alternatively, 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.

HynekS

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>

Anas Abu Farraj

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

Ahmad Jaara

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

<main class="min-h-screen"></main>

Source

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

b.lyte

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

Setop

-1

<div class='relative'>
   <div class='fixed bottom-0 right-10 cursor-pointer rounded-t-3xl bg-red-500 w-10 h-10 grid content-center justify-center'>
      your text
   </div>
</div>

Mahbub Hasan

Source:stackexchange.com

[Django]-Tailwindcss: fixed/sticky footer on the bottom

Sticky Header and Footer

Leave a comment Cancel reply