Tailwind CSS - How to make content height fit to screen

Question

I'm working on an admin dashboard with tailwind css. I want to make the height of Nav and Content fit to the screen.

I know this will do the trick relative flex min-h-screen but by doing so I'm getting the scroll bar because of the height of App Bar.

How can I make the content height 100% without getting the scroll bar?

Minus App Bar height somehow ?

<>
  <div className='bg-blue-700 px-8 flex items-center justify-between py-4 shadow-sm text-white'>
    App Bar
  </div>
  <div className='relative flex'>
    <nav className='bg-white shadow-sm p-6 space-y-6 w-64'>
      Navbar
    </nav>
    <main className='bg-gray-100 flex-1 p-6'>
      Content will go here
    </main>
  </div>
</>

Answer 1

Put the entire layout in a min-h-screen flex flex-col container (or on the body tag), then use flex-grow to fill the remaining height below the app bar...

<div class="min-h-screen flex flex-col">
    <div class='bg-blue-700 px-8 flex items-center justify-between py-4 shadow-sm text-white'> App Bar </div>
    <div class='relative flex flex-grow'>
        <nav class='bg-white shadow-sm p-6 space-y-6 w-64'> Navbar </nav>
        <main class='bg-gray-100 flex-1 p-6'> Content will go here </main>
    </div>
</div>

Codeply demo

Answer 2

Try this, for the responsive app :)

Demo here. :)

<div class="flex flex-col w-full min-h-screen overflow-x-hidden">
  <div class="bg-blue-700 px-6 items-center justify-between py-4 shadow-sm text-white">App Bar</div>
  <div class="flex flex-col sm:flex-row">
     <nav class="w-full sm:w-1/6 bg-white shadow-sm p-6 space-y-6">Navbar</nav>
     <main class="flex bg-gray-100 w-full h-auto p-6">
        Donec sollicitudin molestie malesuada. Nulla quis lorem ut libero malesuada feugiat.</div>
     </main>
  </div>
</div>

Happy coding :)