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
h-64
flex
flex-1
flex-auto
<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>
It doesn't cover the screen height but Douglas' answer seems right. But Thanks for your answer!
You need to put the flex-auto or flex-grow class as in Douglas's answer.
flex-grow
Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink.
Hide child comments as well
Confirm
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Have you tried to remove the specified height you have on the main tag -
h-64and changeflextoflex-1orflex-autoon 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-autoorflex-growclass as in Douglas's answer.