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

【问题标题】：Tailwind CSS list with Static header and footer with Scrollable Area in middle带有静态页眉和页脚的 Tailwind CSS 列表，中间有可滚动区域
【发布时间】：2021-07-13 18:36:45
【问题描述】：

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

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

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

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

【问题讨论】：

标签： css layout height tailwind-css

【解决方案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>

【讨论】：

谢谢，但是在页眉和页脚部分，我们分配的是静态高度？没有它会起作用吗？我的错，它有效！谢谢：0