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>
How to make the main section has full height that close the edges between header and footer?
Top comments (5)
Hey,
You've got
justify-between
on the outermost div. This is telling it to space outheader
main
andfooter
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:
Which looks like...
Hope this helps :)
Thanks, It works :)
Have you tried to remove the specified height you have on the main tag -
h-64
and changeflex
toflex-1
orflex-auto
on the main tagIt doesn't cover the screen height but Douglas' answer seems right. But Thanks for your answer!
You need to put the
flex-auto
orflex-grow
class as in Douglas's answer.