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

Question

我正在使用 tailwind css 处理管理仪表板。我想让 Nav 和 Content 的高度适合屏幕。
我知道这可以解决问题 relative flex min-h-screen但是通过这样做，由于 App Bar 的高度，我得到了滚动条。
如何在不获取滚动条的情况下使内容高度 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 demo