html - TailwindCss 布局，具有全屏高度和滚动内容面板

Question

我正在尝试使用 TailwindCss 创建一个典型的 html 布局——一个固定的页眉和页脚，带有左侧和右侧的侧边栏。
中心内容有一个固定的搜索功能 - 下面的内容应该滚动。
我尝试使用 TailwindCss 和 TailwindUI 中的模式，但无法让溢出的内容(在下面的演示中以浅蓝色显示)滚动而不是向下插入页面。

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>
<div>
  <div class="h-screen flex flex-col bg-gray-300">
    <!-- header -->
    <div class="bg-blue-700 p-4">
      Nav
    </div>
    <div class="flex-grow flex flex-row justify-center">
      <!-- lhs -->
      <div class="flex-shrink-0 w-1/4 p-4">
        Left menu
      </div>
      <!-- center -->
      <div class="flex-1 flex flex-col bg-white">
        <div class="border-b-2 m-4 pb-2 border-gray-200">Search</div>
        <main class="flex-1 overflow-y-scroll p-4 bg-indigo-200">
          <div class="relative">
            <div class="mb-64">Overflowing content</div>
            <div class="mb-64">Overflowing content</div>
            <div class="mb-64">Overflowing content</div>
            <div class="mb-64">Overflowing content</div>
            <div class="mb-64">Overflowing content</div>
            <div class="mb-64">Overflowing content</div>
          </div>
        </div>
      </main>
      <!-- rhs -->
      <div class="flex-shrink-0 w-1/4 p-4">
        Right sidebar
      </div>
    </div>
    <!-- footer -->
    <div class="bg-blue-700 p-4">
      Footer
    </div>
  </div>
</div>

Answer 1

发生的事情是中间的 div(包含我们想要滚动的中心列)被夹到其内容的高度。除非另有指示，否则宁愿这样做，也不愿溢出(至少在 Chrome 和 Firefox 上)。所以我们的中央列甚至没有机会应用它自己的滚动行为。
最小的解决方案是把 overflow-hidden在中间的 div 上，让它知道它的内容可以溢出:

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>
<div>
  <div class="h-screen flex flex-col bg-gray-300">
    <!-- header -->
    <div class="bg-blue-700 p-4">
      Nav
    </div>
    <div class="flex-grow flex flex-row overflow-hidden justify-center">
      <!-- lhs -->
      <div class="flex-shrink-0 w-1/4 p-4">
        Left menu
      </div>
      <!-- center -->
      <div class="flex-1 flex flex-col bg-white">
        <div class="border-b-2 m-4 pb-2 border-gray-200">Search</div>
        <main class="flex-1 overflow-y-auto p-4 bg-indigo-200">
          <div class="relative">
            <div class="mb-64">Overflowing content</div>
            <div class="mb-64">Overflowing content</div>
            <div class="mb-64">Overflowing content</div>
            <div class="mb-64">Overflowing content</div>
            <div class="mb-64">Overflowing content</div>
            <div class="mb-64">Overflowing content</div>
          </div>
        </div>
      </main>
      <!-- rhs -->
      <div class="flex-shrink-0 w-1/4 p-4">
        Right sidebar
      </div>
    </div>
    <!-- footer -->
    <div class="bg-blue-700 p-4">
      Footer
    </div>
  </div>
</div>

...因此，中心列的溢出滚动行为变得可操作。
我还建议在中心列上使用 overflow-y-auto，以便滚动条仅在必要时使用。