Tailwind CSS 列表，带有静态页眉和页脚，中间有可滚动区域

Question

我正在尝试使用 Tailwind CSS 创建一个 3 列的仪表板布局。

我有 - 标题位于顶部，列表位于中间，按钮位于底部位置。我希望整个组件的高度不大于屏幕高度。换句话说，我的列的最大高度应该是屏幕高度。

对于每一列，我希望列表可以在页眉和页脚之间滚动，同时仍然保持页眉、页脚和列表的组合高度不应超过屏幕高度。

我正在尝试使用 Tailwind CSS 来做到这一点，但如果有人也可以使用常规 css 重定向我，我会没事的。

Answer 1

h-screen是flex flex-1你应该关注的。请参阅演示。

<div class="h-screen flex flex-col">
  <header class="flex h-10 bg-gray-200">Header</header>

  <div class="flex flex-1 bg-gray-100 overflow-auto">
    Long Content
  </div>

  <footer class="flex h-10 bg-gray-200">Footer</footer>
</div>