如何在页眉页脚间实现滚动内容？为何无二级纵向滚动条？

为什么content容器没出现滚动条？ #

你当前代码的问题出在两个地方：

1. pageContent容器添加了overflow-auto，导致当内容超出时，是整个pageContent（包含分页栏）一起滚动，而非content区域单独滚动。
2. content的h-[calc(100%-50px)]在flex布局中未被正确约束：因为父容器pageContent是flex-col，子元素默认会根据内容自适应高度，手动计算的高度规则没有生效，所以overflow-auto无法触发。

规范实现方式 #

利用Flex布局的特性，让内容区域自动占据剩余空间，分页栏固定在底部，无需手动计算高度：

<div class="flex h-screen w-full flex-col">
  <header class="h-64 bg-cyan-300">
    <h1>I'm header</h1>
  </header>
  <div id="pageContent" class="flex flex-1 flex-col bg-green-400">
    <div id="content" class="flex-1 overflow-auto">
      <h1 class="h-32">test</h1>
      <h1 class="h-32">test</h1>
      <h1 class="h-32">test</h1>
      <h1 class="h-32">test</h1>
      <h1 class="h-32">test</h1>
      <h1 class="h-32">test</h1>
      <h1 class="h-32">test</h1>
      <h1 class="h-32">test</h1>
      <h1 class="h-32">test</h1>
      <h1 class="h-32">test</h1>
      <h1 class="h-32">test</h1>
      <h1 class="h-32">test</h1>
      <h1 class="h-32">test</h1>
      <h1 class="h-32">test</h1>
      <h1 class="h-32">test</h1>
    </div>
    <div id="pagination" class="flex h-[50px] w-full items-center justify-center bg-purple-300">Pagination</div>
  </div>
</div>

修改说明 #

• 移除pageContent的overflow-auto：避免整个内容区（含分页栏）滚动。
• 给content添加flex-1：让它自动占据pageContent的剩余空间（自动减去分页栏的高度），比手动calc计算更符合Flex布局规范。
• 保留content的overflow-auto：当内容超出剩余空间时，自动显示纵向滚动条。

内容的提问来源于stack exchange，提问作者Ronnie Tseng