DEV Community

Dendi Handian
Dendi Handian

Posted on • Edited on

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

#help #tailwindcss #css #webdev

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.

Read next

lymestack profile image

Implementing Auth in .NET WebApi & SPAs: Why is it still so painful?

Michael Joseph -

ipigantenk profile image

How to install React and Tailwind in Termux

Ipii -

holawagtail_3398ffb6acec6 profile image

¡Hola Wagtail!

HolaWagtail -

jamcha123 profile image

My first full stack app

james -