Material UI中基于AppBar实现的Footer无法固定在页面底部的问题

解决方案 #

你遇到的问题本质是父容器没有撑满视口高度，导致sticky定位的AppBar无法停靠到视口底部。可以通过全局flex布局配合flex弹性属性实现需求，无需依赖AppBar的sticky定位，实现逻辑更稳定：

第一步：调整页面根布局 #

给页面最外层容器设置最小视口高度，采用纵向flex布局，同时给主内容区域设置flexGrow: 1，让其自动撑开剩余空间：

import { Box, CssBaseline } from '@mui/material';

// 页面整体结构示例
const App = () => {
  return (
    <>
      {/* 建议引入CssBaseline重置浏览器默认边距，避免多余滚动条 */}
      <CssBaseline />
      <Box sx={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
        {/* 头部导航、其他固定组件可放在此处 */}
        <Box component="main" sx={{ flexGrow: 1 }}>
          {/* 页面主体内容全部放在这个容器内 */}
        </Box>
        {/* 引入Footer组件 */}
        <Footer />
      </Box>
    </>
  )
}

第二步：修改Footer组件配置 #

将AppBar的position改为static即可，外层flex布局会自动将Footer推到最底部：

const Footer = () => {
    return (
        <AppBar position='static' sx={{ top: 'auto' }}>
            <Grid container direction='column'>
                <Grid item container>
                    <Grid item xs={0} sm={1} />
                    <Grid item xs={12} sm={10}>
                        <h1> info section</h1>
                    </Grid>
                    <Grid item xs={0} sm={1} />
                </Grid>
                <Grid item container>
                    <Grid item xs={0} sm={1} />
                    <Grid item xs={12} sm={10}>
                        <Toolbar disableGutters={true}>
                            <h1>bottom toolbar</h1>
                        </Toolbar>
                    </Grid>
                    <Grid item xs={0} sm={1} />
                </Grid>
            </Grid>
        </AppBar>
    )
}

效果说明 #

• 页面内容高度不足一屏时：主内容区域自动撑满剩余视口高度，Footer固定在视口最底部
• 页面内容高度超出一屏时：主内容区域高度随内容自动扩展，Footer跟随内容展示在页面最底部，不会遮挡内容

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