如何使用 TailwindCSS 填充剩余的屏幕高度

Question

I'm using Vue with Tailwind and want to create a "NotFound" view page. The content on this router view should be in the center on the screen. Above the router view is a navbar component so I have to take care for the height when centering it.

First, I tried to use h-screen for the router view

 <link href="https://unpkg.com/tailwindcss@1.8.12/dist/tailwind.min.css" rel="stylesheet"/> <div> <div class="bg-yellow-400 py-8"> my navbar </div> <div class="bg-green-400 flex justify-center items-center h-screen"> this content is not centered on screen </div> </div>

but as you can see the content in the green container is not in the center of the screen. Next I tried to work with h-full

 <link href="https://unpkg.com/tailwindcss@1.8.12/dist/tailwind.min.css" rel="stylesheet" /> <div class="h-screen"> <div class="bg-yellow-400 py-8"> my navbar </div> <div class="bg-green-400 flex justify-center items-center h-full"> this content is not centered on screen </div> </div>

but unfortunately this still doesn't fix it. Does someone know how to correctly fill up the rest of the screen height so the router view will have a height of 100% - navbarComponentHeight ?

Answer 1

Use flexbox like below:

 <link href="https://unpkg.com/tailwindcss@1.8.12/dist/tailwind.min.css" rel="stylesheet"/> <div class="flex flex-col h-screen"> <div class="bg-yellow-400 py-8"> my navbar </div> <div class="bg-green-400 flex justify-center items-center flex-grow"> this content is not centered on screen </div> </div>