xxxxxxxxxx
<div class="flex flex-col justify-between h-screen">
<header class="h-16 bg-pink-300">Header</header>
<main class="mb-auto h-52 bg-purple-300">Main Content</main>
<footer class="h-16 bg-blue-100">Footer</footer>
</div>
xxxxxxxxxx
<!-- mt-auto makes footer stay at bottom -->
<!-- solution 1 -->
<div className="flex flex-col min-h-screen h-auto">
<nav class="mb-auto">logo</nav>
<main class="my-auto">Main Content</main>
<footer class="mt-auto ">Footer</footer>
</div>
<!-- solution 2 -->
<div className="flex flex-col min-h-screen h-auto">
<main class="my-auto">Main Content</main>
<footer class="mt-auto ">Footer</footer>
</div>
<!--
my-auto is to centralizes it vertically
mb-auto is to make it stay at top
mt-auto is to make it stay at bottom
-->