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

Question

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

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

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

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

Answer 1

h-screen 和 flex flex-1 是你应该关注的。参见 demo。

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

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

Tailwind CSS list with Static header and footer with Scrollable Area in middle

css

height

layout

tailwind-css