How to Create a Fixed/Sticky Footer in TailwindCSS

A common issue in web design is ensuring that the footer remains at the bottom of the page, whether the content is long or short. With TailwindCSS, we can achieve this easily using flexbox, fixed, and sticky positioning.

1. Fixed Footer (Always at the Bottom)

A fixed footer remains visible at the bottom of the viewport, regardless of the page content. It is useful for navigation bars, consent banners, etc.

Example:

<footer class="fixed bottom-0 left-0 w-full bg-gray-900 p-4 text-center text-white">
  &copy; 2025 My Website
</footer>

Explanation:

• fixed → Keeps the footer fixed at a position.
• bottom-0 left-0 → Aligns it at the bottom.
• w-full → Ensures full width.

2. Sticky Footer (Pushes Down with Short Content)

If the content is short, the footer will remain at the bottom; if the content grows, it pushes the footer down.

Example using Flexbox:

<div class="flex min-h-screen flex-col">
  <header class="bg-blue-500 p-4 text-white">Header</header>
  <main class="flex-grow bg-gray-100 p-4">Main Content</main>
  <footer class="bg-gray-900 p-4 text-center text-white">&copy; 2025 My Website</footer>
</div>

Explanation:

• min-h-screen → Makes the container at least the height of the viewport.
• flex flex-col → Uses flexbox for column layout.
• flex-grow → Allows the main content to expand, pushing the footer down.

3. Sticky Footer Using sticky

An alternative approach using sticky positioning.

<div class="flex min-h-screen flex-col">
  <main class="flex-grow bg-gray-100 p-4">Content</main>
  <footer class="sticky top-[100vh] bg-gray-900 p-4 text-center text-white">
    &copy; 2025 My Website
  </footer>
</div>

Explanation:

• sticky + top-[100vh] → Keeps the footer at the bottom of the viewport when content is short.

Conclusion

• Use fixed bottom-0 for a fixed footer.
• Use flex flex-col min-h-screen with flex-grow for a sticky footer.
• Use sticky top-[100vh] for another sticky footer approach.

FAQs

1. Why is my footer overlapping content?

Check if fixed is used instead of sticky and ensure flex-grow is applied properly.

2. Can I make the footer responsive?

Yes, you can use TailwindCSS breakpoints:

<footer class="bg-gray-900 p-4 text-white md:fixed md:bottom-0 md:w-full"></footer>

This makes the footer fixed on medium screens and above but normal on smaller screens.

3. Which method should I use?

• Use fixed when the footer should always be visible.
• Use flexbox when it should be at the bottom but move with content.
• Use sticky for a hybrid approach.