Tailwind CSS - 如何使内容高度适合屏幕

Question

我正在使用 tailwind css 开发管理仪表板。我想让导航和内容的高度适合屏幕。

我知道这可以解决问题relative flex min-h-screen，但是通过这样做，由于应用程序栏的高度，我得到了滚动条。

如何在不获取滚动条的情况下使内容高度为100%？

以某种方式减去应用栏高度？

<>
  <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

将整个布局放入min-h-screen flex flex-col容器中（或放在 body 标签上），然后用于flex-grow填充应用栏下方的剩余高度...

<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 演示