TheLazy.Dev
Portfolio GitHub

Blog

help |tailwindcss |css |webdev

Tailwind: Flex Col Justify Between Middle Full Height/Width?

dendihandian

Dendi Handian

Posted on November 5, 2020

Tailwind: Flex Col Justify Between Middle Full Height/Width?

I have this tailwind snippet:



<div class="min-h-screen flex flex-col justify-between">
  <header class="p-4 bg-teal-500 text-center text-white font-bold">Header</header>
  <main class="h-64 bg-teal-600 flex items-center justify-center text-white">Main</main>
  <footer class="p-4 bg-teal-500 text-center text-white font-bold">Footer</footer>
</div>
Enter fullscreen mode Exit fullscreen mode

and here is the preview:
https://play.tailwindcss.com/

How to make the main section has full height that close the edges between header and footer?

💖 💪 🙅 🚩
dendihandian
Dendi Handian

Posted on November 5, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Tailwind: Flex Col Justify Between Middle Full Height/Width?
help Tailwind: Flex Col Justify Between Middle Full Height/Width?

November 5, 2020