实现带粘性头部的页面：主内容区不滚动，内部列可滚动

问题描述 #

我希望创建一个全屏高度的网页，带有sticky header（粘性头部）。头部下方的剩余页面区域用作内容区，该内容区自身不允许滚动，但内部的div需要支持滚动。示例HTML结构如下：

<div class="full-height-page">
        
        <!-- sticks to the top -->
    <header class="sticky-header">
        HEADER
    </header>

        <!-- fills the remainder of the height and has no scroll -->
    <main class="main-content">

        <div class="two-cols-wrapper"> 
                        
                        <!-- this should scroll! -->
            <div class="col-1">
                <!-- overflowing content -->
            </div>
                        
                        <!-- this should scroll! -->
            <div class="col-2">
                <!-- overflowing content -->
            </div>

        </div>

    </main>

</div>

我尝试用Tailwind CSS实现但没成功，不想设置固定高度，希望高度动态调整，原本以为设置scroll-y即可生效，但并未成功，请问最佳实现方案是什么？

最佳实现方案（Tailwind CSS） #

核心利用Flexbox布局实现动态高度分配，无需固定高度值，具体实现如下：

完整代码示例 #

<div class="h-screen flex flex-col">
  <!-- 粘性头部 -->
  <header class="sticky top-0 bg-white shadow-md p-4">
    HEADER
  </header>

  <!-- 填充剩余高度的主内容区（自身不滚动） -->
  <main class="flex-1 overflow-hidden">
    <div class="two-cols-wrapper h-full flex gap-4 p-4">
      <!-- 可滚动的左侧列 -->
      <div class="col-1 flex-1 overflow-y-auto bg-gray-50 p-4">
        <!-- 示例溢出内容 -->
        <p>滚动内容列1</p>
        <p>滚动内容列1</p>
        <p>滚动内容列1</p>
        <p>滚动内容列1</p>
        <p>滚动内容列1</p>
        <p>滚动内容列1</p>
        <p>滚动内容列1</p>
        <p>滚动内容列1</p>
        <p>滚动内容列1</p>
        <p>滚动内容列1</p>
        <p>滚动内容列1</p>
        <p>滚动内容列1</p>
        <p>滚动内容列1</p>
        <p>滚动内容列1</p>
        <p>滚动内容列1</p>
        <p>滚动内容列1</p>
        <p>滚动内容列1</p>
        <p>滚动内容列1</p>
        <p>滚动内容列1</p>
        <p>滚动内容列1</p>
      </div>

      <!-- 可滚动的右侧列 -->
      <div class="col-2 flex-1 overflow-y-auto bg-gray-50 p-4">
        <!-- 示例溢出内容 -->
        <p>滚动内容列2</p>
        <p>滚动内容列2</p>
        <p>滚动内容列2</p>
        <p>滚动内容列2</p>
        <p>滚动内容列2</p>
        <p>滚动内容列2</p>
        <p>滚动内容列2</p>
        <p>滚动内容列2</p>
        <p>滚动内容列2</p>
        <p>滚动内容列2</p>
        <p>滚动内容列2</p>
        <p>滚动内容列2</p>
        <p>滚动内容列2</p>
        <p>滚动内容列2</p>
        <p>滚动内容列2</p>
        <p>滚动内容列2</p>
        <p>滚动内容列2</p>
        <p>滚动内容列2</p>
        <p>滚动内容列2</p>
        <p>滚动内容列2</p>
      </div>
    </div>
  </main>
</div>

关键实现要点 #

• 全屏容器：最外层用h-screen flex flex-col，让容器占满视口高度，并采用垂直Flex布局，自动分配子元素高度。
• 粘性头部：头部用sticky top-0实现固定在顶部，无需额外设置高度，内容高度会自适应。
• 主内容区：用flex-1 overflow-hidden让主内容区自动填充头部剩余的所有高度，同时自身隐藏溢出内容，避免整个页面滚动。
• 内部滚动列：每个列元素设置flex-1 overflow-y-auto，让列填充父容器宽度/高度，当内容超出时自动显示垂直滚动条。

内容的提问来源于stack exchange，提问作者Claartje Barkhof