Tailwind CSS make Footer always stay at bottom of page

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.