如何用Tailwind与Nextjs实现无sticky的多区域独立滚动布局？

需求说明 #

要复刻Stripe文档页的布局：

• 页面整体为纵向flex容器，包含导航栏和主内容区，导航栏在上方，不使用sticky或fixed定位
• 主内容区是overflow-y:hidden的flex容器，包含左侧侧边栏和右侧内容块，二者可独立滚动，页面整体无滚动条

原代码问题分析 #

你的代码存在以下关键问题：

1. 根元素高度未限制：html和body默认未设置h-full，导致最外层的h-full无法继承视口高度，页面会被内容撑开产生整体滚动
2. 侧边栏嵌套冗余：侧边栏外层多了一个无样式的<div>，破坏了高度继承链，导致侧边栏的h-full无法正确获取主内容区的高度
3. 右侧内容块无滚动设置：右侧内容块未添加overflow-y:auto，内容过多时会撑大主容器，触发页面整体滚动

修正后的实现代码 #

首先在全局样式中确保根元素高度：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html, body {
    @apply h-full;
  }
}

然后是页面组件代码：

<div className="h-full bg-white">
  <div className="flex flex-col h-full">
    {/* 导航栏：自然高度，由内容撑开 */}
    <div id="Navbar" className="bg-blue-200 p-4">
      Navbar
    </div>
    {/* 主内容区：占满剩余高度，隐藏溢出内容 */}
    <div id="MainContent" className="flex flex-auto overflow-hidden">
      {/* 左侧侧边栏：固定宽度，纵向flex布局 */}
      <div className="flex-shrink-0 flex flex-col h-full w-56 bg-green-100">
        {/* 侧边栏滚动内容区：占满剩余高度，自动显示垂直滚动条 */}
        <div className="flex-grow overflow-y-auto overflow-x-hidden p-4">
          {Array.from({length: 50}).map((_, i) => (
            <p key={i}>lhs</p>
          ))}
        </div>
        {/* 侧边栏页脚：固定在侧边栏底部 */}
        <div className="p-4 border-t">
          Sidebar footer
        </div>
      </div>
      {/* 右侧内容块：占满剩余宽度，自动显示垂直滚动条 */}
      <div className="bg-red-100 flex-grow overflow-y-auto p-4">
        {Array.from({length: 100}).map((_, i) => (
          <p key={i}>Content line {i+1}</p>
        ))}
      </div>
    </div>
  </div>
</div>

关键实现要点 #

• 根元素高度锁定：通过html, body { h-full }确保页面高度被限制在视口范围内，避免整体滚动
• Flex高度继承：所有嵌套的flex容器都设置h-full，保证高度能正确传递到子元素
• 独立滚动区域：侧边栏的内容区和右侧内容块分别设置flex-grow overflow-y-auto，当内容超出容器高度时自动显示滚动条，且不会影响其他区域
• 冗余层级移除：去掉侧边栏外层的无用<div>，确保高度继承链完整

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