How create a TRUE sticky header/ footer using Tailwindcss (sticks to bottom even if scroll)?

Question

Lot of blogs and posts purport to create a "sticky footer" using Tailwindcss, but none that I can find thought about the case where there is more than a short "hello world" line of content:

For example in none of these examples does the footer "stick" if the main area is tall enough to scroll.

https://www.gomasuga.com/blog/creating-a-sticky-footer-with-tailwind

Tailwindcss: fixed/sticky footer on the bottom

https://medium.com/@milanchheda/sticky-footer-using-tailwind-css-1c757ea729e2

... and several codepen examples.

Is there a way with Tailwindcss to create a small footer that is alway sidsplaye don the screen regardless of how long the main content area is?

Luteal

Answer 1

In the examples you're sharing they all expect the main content area to be where the scroll happens. To do this you just add overflow-hidden and h-screen to the outermost div or body tag and overflow-y-scroll to the main content area and that section will get it's own set of scrollbars but if done right the page itself will not have scrollbars. Here's an example of that on Tailwind play https://play.tailwindcss.com/A5Hs7ZtGad

In the end Tailwind is just CSS so if you can make something with CSS you can recreate it with Tailwind's utility classes. Another solution to this problem is if you just want a footer (or any div) to stay at the bottom above all other content and you want the regular scrollbars than you can give the element fixed bottom-0 left-0 w-full and it will have a similar result but will also have the ability to cover content if your inner elements don't have enough padding or margin. Here's an example of that https://play.tailwindcss.com/nna2QkrxlK

Wellpreserved

Answer 2

I solved this issue mostly using flex with the outermost div using the min-h-screen class and the content of the page using the flex-grow class.

This solution does not show the scroll bar for something small like a hello world page, but shows a scroll bar if the content of the page expands enough.

<div class="flex flex-col min-h-screen">
  <header class="sticky z-50 bg-gray-300 top-0 p-4">
    header contents
  </header>
  <div class="flex-grow">
    <main>
        <div>
          <!-- ADD MORE TEXT FOR THE SCROLL BAR TO APPEAR -->
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat quos dignissimos doloremque enim necessitatibus accusamus dolorum aperiam, at tempora vel?
        </div>
    </main>
  </div>
  <footer class="sticky z-50 bg-gray-300 bottom-0 p-4">
    footer contents
  </footer>
</div>

Feel free to play around with it yourself:

https://play.tailwindcss.com/3MEiKoraDl

@JHeth was close but the scroll bar is always there if you use their solution.

Sher

Answer 3

To make a header & footer sticky, you can use Flexbox. First wrap your header, main, footer tags with a container/wrapper div. And then add flex flex-col min-h-screen classes to the container/wrapper. And then add flex-1 class to the main tag.

This will make the main/content grow as much as needed. Making it take all the space in the screen leaving some space for the header and footer as much as they need.

And to make the header sticky, you can add sticky top-0 left-0 w-full classes to the header tag.

I have written a whole blog on this, check it out: https://developerwings.com/footer-stick-to-bottom-using-tailwind/

Dostie

Answer 4

I wanted to make a chat application where the Header and the chat input area at the bottom is always visible and also the scroll is for the whole page and not just for the middle section. I used the following for the tailwind which are similar solution to @JHeth

  <div class="fixed inset-x-0 top-0 left-0 py-5 px-4 bg-cyan-300">Menu</div>
  <div class="flex flex-col bg-green-300 p-16 min-h-screen">
    <div class="flex flex-col items-start">
      <div class="my-32 h-64 w-64 bg-green-400">hello</div>
    </div>
    <div class="flex flex-col items-end">
      <div class="m-32 h-64 w-64 bg-blue-400">hellos</div>
    </div>
  </div>
  <div class="fixed inset-x-0 bottom-0 left-0 py-5 px-4 bg-cyan-300">
    Menu
  </div>
</div>

Among