CODEWITHSUNDEEP
htmlcsstailwind-css
user13755987
user13755987

Reputation:

How to fill up the rest of the screen height using TailwindCSS

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/[email protected]/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/[email protected]/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?

Upvotes: 9

Views: 22259

Answers (1)

Temani Afif
Temani Afif

Reputation: 272789

Use flexbox like below:

<link href="https://unpkg.com/[email protected]/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 centered on screen
  </div>
</div>

Upvotes: 36

Related Questions