具有全屏高度和滚动内容面板的 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，以便滚动条仅在必要时使用。

Answer 2

这可能不是理想的解决方案，但它会有所帮助。将此规则添加到您的 CSS：

main.flex-1.overflow-y-scroll.p-4.bg-indigo-200 {
    flex-basis: 0;
}

main.flex-1.overflow-y-scroll.p-4.bg-indigo-200 {
    flex-basis: 0;
}

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