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

Question

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

我知道这会解决问题relative flex min-h-screen，但由于应用栏的高度，这样做我会得到滚动条。

如何在没有滚动条的情况下将内容高度设为 100%？

以某种方式减去 App Bar 高度？

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

Answer 2

试试这个，响应式应用:)

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

编码愉快:)