Tailwind h-screen布局顶部导航占用高度致内容溢出屏幕问题

问题根因 #

布局溢出的核心原因是主内容区<main>标签设置了h-screen（强制高度等于100vh视口高度），但它的父容器是纵向flex布局，内部已经放置了固定高度74px的顶部导航栏，最终右侧区域总高度为74px + 100vh，超出了外层容器的视口高度，溢出距离刚好等于顶部导航栏高度，和观测到的现象完全一致。
之前添加pb-*类的方案只是在补底部内边距，没有解决总高度溢出的核心问题，必然会出现底部多余留白。

修复步骤 #

不需要硬编码高度计算、不需要加额外内边距，通过flex布局的自适应特性即可完美适配：

• 给包裹侧边导航和右侧主区域的flex容器补充h-screen类，让容器占满整个视口高度，同时将原有的items-start替换为items-stretch，保证侧边栏和右侧主区域高度自动撑满父容器
• 将主内容区<main>的h-screen类替换为flex-1 overflow-auto，让主内容区自动占据顶部导航栏之外的所有剩余高度，仅当内部内容超出时才出现滚动条，不会溢出屏幕
• 给顶部导航栏补充flex-shrink-0类，避免内部内容过多时导航栏被压缩；补充flex类让原有的items-center垂直居中规则生效

修改后的样式代码 #

const style = {
  container: `h-screen overflow-hidden relative `,
  mainContainer: `bg-gray-800 flex flex-col pl-0 w-full lg:w-[calc(100%-13rem)]`,
  // 移除h-screen，改用flex-1自适应剩余高度
  main: `bg-gray-100 flex-1 overflow-auto lg:rounded-tl-3xl `,
};

修改后的页面结构代码 #

<LayoutProvider>
  <div className={style.container}>
    {/* 新增h-screen、items-stretch，移除items-start */}
    <div className="flex items-stretch h-screen">
      <Overlay />
      <SideNavigation mobilePosition="left" />
      <div className={style.mainContainer}>
        <TopNavigation />
        {/* 给顶栏补充flex、flex-shrink-0保证布局稳定 */}
        <header className="bg-gray-800 h-[74px] flex items-center relative w-full flex-shrink-0">
          顶部导航内容
        </header>
        <main className={style.main}>{children}</main>
      </div>
    </div>
  </div>
</LayoutProvider>

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