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

Question

我正在与顺风css的管理仪表板工作。我想让导航的高度和内容适合屏幕。

我知道这样做的技巧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>

快乐编码:)