Tailwind实现固定头部+左侧栏，仅中右栏可滚动布局问题

核心修复思路 #

要实现页面高度适配屏幕、仅中间/右侧栏内容滚动，关键是锁定整个页面的滚动能力，再给需要滚动的区域单独设置滚动属性。

具体实现步骤 #

1. 锁定根元素滚动
   给html和body添加全屏高度+隐藏溢出的样式，从根源阻止页面整体滚动：

   <html class="h-screen overflow-hidden">
   <body class="h-screen overflow-hidden">
   

2. 构建全屏垂直布局
   用垂直flex容器包裹整个页面，头部固定高度，下方三栏容器占满剩余屏幕高度：

   <div class="flex flex-col h-full">
     <!-- 顶部固定头部 -->
     <header class="h-16 bg-blue-500 text-white flex items-center px-4">固定头部</header>
     <!-- 三栏内容容器（占满剩余高度） -->
     <div class="flex flex-1 overflow-hidden">
       <!-- 左侧固定栏 -->
       <aside class="w-64 bg-gray-100 p-4">
         左侧固定栏内容<br>
         无滚动需求
       </aside>
       <!-- 中间可滚动栏 -->
       <div class="flex-1 flex flex-col">
         <!-- 中间栏固定头部 -->
         <div class="h-12 bg-green-500 text-white flex items-center px-4">中间栏头部</div>
         <!-- 中间栏滚动内容区 -->
         <div class="flex-1 overflow-y-auto p-4">
           <!-- 此处放置大量内容，超出后会自动滚动 -->
           中间栏滚动内容<br>
           中间栏滚动内容<br>
           ...
         </div>
       </div>
       <!-- 右侧可滚动栏 -->
       <div class="w-80 flex flex-col">
         <!-- 右侧栏固定头部 -->
         <div class="h-12 bg-yellow-500 text-white flex items-center px-4">右侧栏头部</div>
         <!-- 右侧栏滚动内容区 -->
         <div class="flex-1 overflow-y-auto p-4">
           <!-- 此处放置大量内容，超出后会自动滚动 -->
           右侧栏滚动内容<br>
           右侧栏滚动内容<br>
           ...
         </div>
       </div>
     </div>
   </div>
   

3. 关键细节说明

   • 所有父容器必须设置h-full或flex-1，确保高度严格适配屏幕，避免内容撑大页面
   • 仅给中间/右侧栏的内容区域添加overflow-y-auto，只有当内容超出容器高度时才会显示滚动条
   • 左侧栏不设置滚动属性，保持固定状态

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