React MUI布局问题：如何实现工具栏、全屏内容区与底部页脚？

我想基于React MUI为应用创建一个布局，要求包含：

• Toolbar
• 全屏拉伸的页面内容
• 被页面内容推至底部的Footer

效果参考：

我最初的实现代码：

import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Container from '@mui/material/Container';
import Box from '@mui/material/Box';

export default function Demo() {
  return (
    <>
      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
        <AppBar position="static">
          <Toolbar>Logo</Toolbar>
        </AppBar>
        <Container sx={{ flexGrow: 1 }}>Page content goes here</Container>
        <Container>The footer at the bottom</Container>
      </Box>
    </>
  );
}

页面内容无法全屏拉伸，我又尝试了Grid实现：

import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Container from '@mui/material/Container';
import Grid from '@mui/material/Grid2';

export default function Demo() {
  return (
    <Grid container direction="column">
      <AppBar position="static">
        <Toolbar>Logo</Toolbar>
      </AppBar>
      <Container sx={{ flexGrow: 1 }}>Page content goes here</Container>
      <Container>The footer at the bottom</Container>
    </Grid>
  );
}

但问题依旧，请问哪里出错了？

核心问题是最外层容器没有占满视口高度，同时Container组件默认带左右内边距且未设置高度，导致内容无法拉伸。要实现粘性底部布局，需做以下关键调整：

1. 给最外层容器设置minHeight: '100vh'，确保它至少占满整个浏览器视口高度
2. 利用flexGrow: 1让内容容器填充AppBar和Footer之外的剩余空间，从而把Footer推到底部
3. 若需要全屏拉伸内容，可直接用Box替代Container（Container默认带内边距和宽度限制）

修正后代码（全屏内容版） #

import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Box from '@mui/material/Box';

export default function Demo() {
  return (
    <Box 
      sx={{ 
        display: 'flex', 
        flexDirection: 'column', 
        minHeight: '100vh', 
        width: '100%'
      }}
    >
      <AppBar position="static">
        <Toolbar>Logo</Toolbar>
      </AppBar>
      {/* 内容容器：填充剩余空间 */}
      <Box sx={{ flexGrow: 1, width: '100%' }}>
        Page content goes here（全屏拉伸）
      </Box>
      {/* Footer自动被推至底部 */}
      <Box sx={{ bgcolor: 'grey.200', py: 2 }}>
        The footer at the bottom
      </Box>
    </Box>
  );
}

带Container宽度控制的版本（内容居中） #

如果需要保留Container的宽度限制和内边距，可以这样调整：

import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Container from '@mui/material/Container';
import Box from '@mui/material/Box';

export default function Demo() {
  return (
    <Box 
      sx={{ 
        display: 'flex', 
        flexDirection: 'column', 
        minHeight: '100vh',
        width: '100%',
        bgcolor: 'grey.100'
      }}
    >
      <AppBar position="static">
        <Toolbar>Logo</Toolbar>
      </AppBar>
      {/* 外层Box填充剩余高度，内层Container控制内容宽度 */}
      <Box sx={{ flexGrow: 1, width: '100%' }}>
        <Container sx={{ height: '100%', bgcolor: 'white', py: 3 }}>
          Page content goes here（带内边距的居中内容）
        </Container>
      </Box>
      <Box sx={{ width: '100%', bgcolor: 'grey.200' }}>
        <Container sx={{ py: 2 }}>
          The footer at the bottom（居中的Footer内容）
        </Container>
      </Box>
    </Box>
  );
}

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