具有全屏高度和滚动内容面板的 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

这可能不是理想的解决方案，但它有帮助。将此规则添加到您的 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;
}

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