Tailwind CSS make Footer always stay at bottom of page

Question

So, I am building a webpage with a basic layout of

Navbar
Content
Footer

Example picutre, taken from: Tailwindcss: fixed/sticky footer on the bottom

My App.vue component

  <div class="justify-center h-screen relative">
    <TheNavbar class="top-0"/>
    <div class="h-screen mb-auto">
      <router-view class="mb-auto" :key="$route.fullPath"/>
    </div>
    <Toast v-if="showToast" :message="showToast"/>
    <Footer class="relative" :footer_links="footer_links"/>  
  </div>

I want the Footer to always stay at the bottom of the page. When there is not enough content, push the Footer to the bottom of the page!

Using h-screen on my content pushes the Footer to the bottom. However on pages where I need to scroll, the footer isn't pushed down but interferes with the content. See picture...

The problem reverses When I get rid of the h-screen class. Now if there isn't enough content, the footer just creeps up to the content, leaving a blank space below it.

How do I make the Footer stay at the bottom of the page, always?

Appendix:

Using:

<Footer class="fixed inset-x-0 bottom-0"/>

makes the Footer stay at the bottom of the page. However, now when I scroll, the bottom of my content is cut by the footer.

Does this answer your question? [Tailwindcss: fixed/sticky footer on the bottom](https://stackoverflow.com/questions/59812003/tailwindcss-fixed-sticky-footer-on-the-bottom) — Amal nandan, Aug 09 '21 at 10:32
@Amal nandan, unfortunately not. I have the same issues as mentioned in my question. When there is not enough content on the page the footer is pushed down, but when there is enough content, the Footer stays fixed and cuts my content in half — Martin Müsli, Aug 19 '21 at 14:15
Cant you set a min-height to 100vh something like that, so that if there is no content also the heightof the div above footer will push the footer down — Amal nandan, Aug 19 '21 at 14:42

score 17 · Answer 1 · answered Aug 09 '21 at 09:55

Lol, I actually got the answer from the link which you had provided. Tailwindcss: fixed/sticky footer on the bottom

The second answer with 1 upvote did it for me.

<div class="fixed inset-x-0 bottom-0"> </div>

Checkout official TW docs for the position - https://tailwindcss.com/docs/position

Checkout the utilities for controlling the placement of positioned elements - https://tailwindcss.com/docs/top-right-bottom-left

Tailwind CSS make Footer always stay at bottom of page

1 Answers1