DEV Community

Dendi Handian
Dendi Handian

Posted on • Updated on

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?

Top comments (5)

Collapse
 
dglsparsons profile image
Douglas Parsons

Hey,

You've got justify-between on the outermost div. This is telling it to space out header main and footer equally (with space between). I don't think you need this.

To get the main section to grow and fill the content, you need a flex-grow property. This is done in tailwind through a flex-grow class.

Fixing those two things should give you this:

<div class="min-h-screen flex flex-col">
  <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 flex-grow 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

Which looks like...

Layout

Hope this helps :)

Collapse
 
dendihandian profile image
Dendi Handian

Thanks, It works :)

Collapse
 
chingaipe profile image
Alick Chinga

Have you tried to remove the specified height you have on the main tag - h-64 and change flex to flex-1 or flex-auto on the main tag

Collapse
 
dendihandian profile image
Dendi Handian • Edited
<div class="min-h-screen flex-auto flex-col justify-between">
  <header class="p-4 bg-teal-500 text-center text-white font-bold">Header</header>
  <main class="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

It doesn't cover the screen height but Douglas' answer seems right. But Thanks for your answer!

Collapse
 
chingaipe profile image
Alick Chinga

You need to put the flex-auto or flex-grow class as in Douglas's answer.