Next.js开发中页脚无法固定在页面最底部问题求助

问题原因 #

1. 你采用的Flex布局粘页脚方案核心逻辑是：Flex父容器（#__next）下的主内容区域自动占满剩余视口空间，你当前未给主内容容器设置flex: 1属性，页脚无法被推至容器底部。
2. .paper类设置的min-height: 100vh会强制内容块占满一整屏高度，哪怕实际内容不足，导致页脚排在该高度块之后，出现底部空白。
3. 页脚未适配Flex布局的排布规则，冗余的定位属性也影响了展示效果。

修复步骤 #

1. 调整全局样式 #

给html、body、#__next补充高度属性确保继承正常，修改后的global.css如下：

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
  scroll-behavior: smooth;
  font-family: 'Roboto', sans-serif;
}

#__next {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  height: 100%;
}

2. 修改paper类样式 #

移除多余的强制全屏高度，新增占满剩余空间的属性：

.paper {
  display: flex;
  flex-direction: column;
  min-width: fit-content;
  flex: 1;
}

3. 简化页脚样式 #

移除冗余的定位相关属性，Flex布局会自动将页脚排在容器尾部：

<Box
  component="footer"
  sx={{
    py: 3,
    px: 2,
    pd: 3,
    width: '100%',
    backgroundColor: (theme) =>
      theme.palette.mode === 'light'
        ? theme.palette.grey[200]
        : theme.palette.grey[800],
  }}
>

如果你的Layout组件内还包含导航栏等其他公共模块，确保仅主内容容器设置flex: 1即可。

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