Search code examples
tailwind-csssticky-footer

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


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?


Solution

  • 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