如何使用Tailwind CSS或常规CSS实现高度不超屏幕的三列仪表盘布局：静态页眉、中间滚动列表与底部按钮

没问题，这个需求用Tailwind CSS就能完美实现，不需要额外写自定义CSS。核心思路是利用flex布局的垂直排列和空间分配特性，让中间的列表区域自动填充页眉和按钮之外的剩余空间，同时支持滚动。

下面是完整的实现代码：

<div class="grid grid-cols-3 gap-4 p-4 bg-gray-100 min-h-screen">
  <!-- 第一列 -->
  <div class="flex flex-col h-screen bg-white rounded-lg shadow-md overflow-hidden">
    <!-- 页眉 -->
    <header class="p-4 border-b bg-gray-50">
      <h2 class="font-semibold text-lg">列1 页眉</h2>
    </header>
    <!-- 可滚动列表 -->
    <div class="flex-1 overflow-y-auto p-2">
      <!-- 示例列表项，复制多个测试滚动 -->
      <div class="p-3 border-b hover:bg-gray-50">列表项 1</div>
      <div class="p-3 border-b hover:bg-gray-50">列表项 2</div>
      <div class="p-3 border-b hover:bg-gray-50">列表项 3</div>
      <div class="p-3 border-b hover:bg-gray-50">列表项 4</div>
      <div class="p-3 border-b hover:bg-gray-50">列表项 5</div>
      <div class="p-3 border-b hover:bg-gray-50">列表项 6</div>
      <div class="p-3 border-b hover:bg-gray-50">列表项 7</div>
      <div class="p-3 border-b hover:bg-gray-50">列表项 8</div>
      <div class="p-3 border-b hover:bg-gray-50">列表项 9</div>
      <div class="p-3 border-b hover:bg-gray-50">列表项 10</div>
      <div class="p-3 border-b hover:bg-gray-50">列表项 11</div>
      <div class="p-3 border-b hover:bg-gray-50">列表项 12</div>
      <div class="p-3 border-b hover:bg-gray-50">列表项 13</div>
      <div class="p-3 border-b hover:bg-gray-50">列表项 14</div>
      <div class="p-3 border-b hover:bg-gray-50">列表项 15</div>
    </div>
    <!-- 底部按钮 -->
    <footer class="p-4 border-t">
      <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded">操作按钮</button>
    </footer>
  </div>

  <!-- 第二列（结构和第一列完全一致） -->
  <div class="flex flex-col h-screen bg-white rounded-lg shadow-md overflow-hidden">
    <header class="p-4 border-b bg-gray-50">
      <h2 class="font-semibold text-lg">列2 页眉</h2>
    </header>
    <div class="flex-1 overflow-y-auto p-2">
      <div class="p-3 border-b hover:bg-gray-50">列表项 A</div>
      <div class="p-3 border-b hover:bg-gray-50">列表项 B</div>
      <!-- 更多列表项... -->
    </div>
    <footer class="p-4 border-t">
      <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded">操作按钮</button>
    </footer>
  </div>

  <!-- 第三列 -->
  <div class="flex flex-col h-screen bg-white rounded-lg shadow-md overflow-hidden">
    <header class="p-4 border-b bg-gray-50">
      <h2 class="font-semibold text-lg">列3 页眉</h2>
    </header>
    <div class="flex-1 overflow-y-auto p-2">
      <div class="p-3 border-b hover:bg-gray-50">列表项 X</div>
      <div class="p-3 border-b hover:bg-gray-50">列表项 Y</div>
      <!-- 更多列表项... -->
    </div>
    <footer class="p-4 border-t">
      <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded">操作按钮</button>
    </footer>
  </div>
</div>

关键Tailwind类说明： #

• flex flex-col：将每列的内部元素设置为垂直排列的flex容器
• h-screen：限制每列的最大高度为当前屏幕高度，确保整体不超出视口
• flex-1：让列表区域自动占据页眉和按钮之外的所有剩余垂直空间
• overflow-y-auto：当列表内容超出可用空间时，自动显示垂直滚动条
• overflow-hidden：防止列内部元素溢出导致布局混乱，配合h-screen使用

额外说明： #

• 如果你的页眉或按钮需要固定高度（比如h-16），这个方案依然有效，flex布局会自动调整剩余空间分配
• 如果你需要给整个页面添加内边距，只需要调整最外层容器的p-4值即可，不会影响每列的高度限制

内容的提问来源于stack exchange，提问作者Dhruv patel