基于TailwindCSS实现Header+Sidebar+Content的h-screen布局问题

问题原因 #

你的代码里外层容器用了h-screen，但<body>默认存在边距，且中间的横向flex容器用h-full会继承父级的全屏高度，叠加header的固定高度后，整体高度超过视口，导致body出现滚动条。

修复方案 #

只需要两处关键修改：

• 清除<body>的默认边距
• 将中间横向flex容器的h-full替换为flex-1，让它自动占据header之外的剩余垂直空间

修改后的完整代码 #

<body class="m-0">
  <div class="flex flex-col h-screen">
    <header class="bg-green-500 h-20 shrink-0">
      header
    </header>
    <div class="flex flex-row flex-1">
      <aside class="bg-red-500 w-1/3 overflow-y-scroll">
        aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside
      </aside>
      <main class="bg-blue-500 w-2/3 overflow-y-scroll">
        main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>main content<br>
      </main>
    </div>
  </div>
</body>

效果说明 #

• header始终固定在页面顶部，高度保持h-20不变
• 侧边栏和主内容区自动填满header下方的剩余空间
• 当侧边栏或主内容区的内容超出容器高度时，各自独立触发垂直滚动，不会影响整体body的滚动
• 内容不足时，侧边栏和主内容区会拉伸填充剩余空间，适配类似Airbnb页面的布局需求

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