NextJS React如何让主体内容占满除header外的body剩余高度

核心思路是利用flex弹性布局的自动空间分配能力，不需要给导航设置固定高度即可实现下方内容占满剩余视口高度：

• 第一步：给SessionProvider（或其外层包裹的根容器）设置垂直方向flex布局，同时设置最小高度为全屏视口高度
• 第二步：给页面Component外层包裹一个容器，设置flex-grow: 1属性，该容器会自动占据导航外的所有剩余高度
• 第三步：清除body标签的默认外边距，避免出现多余滚动条

代码示例 #

修改后的_app文件代码： #

function MyApp({ Component, pageProps }) {
  return (
    /* 外层容器设置垂直flex布局 + 最小全屏高度 */
    <SessionProvider className="flex flex-col min-h-screen">
        <Nav />
        /* 内容容器设置自动占满剩余空间 */
        <div className="flex-grow">
          <Component {...pageProps} />
        </div>
    </SessionProvider>
  );
}

export default MyApp;

如果SessionProvider不支持透传className属性，在外层多包裹一层div即可：

function MyApp({ Component, pageProps }) {
  return (
    <div className="flex flex-col min-h-screen">
      <SessionProvider>
          <Nav />
          <div className="flex-grow">
            <Component {...pageProps} />
          </div>
      </SessionProvider>
    </div>
  );
}

全局样式补充（可选，若未引入Tailwind基础重置样式需添加）： #

body {
  margin: 0;
  padding: 0;
}

说明 #

• flex布局会自动识别Nav的实际渲染高度，自动计算剩余空间分配给内容容器，导航高度动态变化时也会自适应调整
• 使用min-h-screen而非固定h-screen，可以避免页面内容高度超过视口时出现内容截断的问题
• 如果你使用的不是Tailwind，换成对应CSS属性即可：display: flex; flex-direction: column; min-height: 100vh; 以及 flex-grow: 1;

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