材料UI页脚不转到页面底部

import React from 'react';
import { Container, Box } from '@mui/material';

function App() {
  return (
    <Container maxWidth="sm">
      <Box sx={{ flexGrow: 1 }}>
        {/* 页面内容 */}
      </Box>
      <Box
        sx={{
          position: 'absolute',
          bottom: 0,
          width: '100%',
          backgroundColor: 'background.paper',
          padding: '1rem',
        }}
      >
        {/* 页脚内容 */}
        Footer
      </Box>
    </Container>
  );
}

export default App;

import React from 'react';
import { Container, Grid } from '@mui/material';

function App() {
  return (
    <Container maxWidth="sm">
      <Grid container direction="column" minHeight="100vh">
        <Grid item xs>
          {/* 页面内容 */}
        </Grid>
        <Grid item>
          <div
            style={{
              backgroundColor: 'background.paper',
              padding: '1rem',
              textAlign: 'center',
            }}
          >
            {/* 页脚内容 */}
            Footer
          </div>
        </Grid>
      </Grid>
    </Container>
  );
}

export default App;

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <main>
        {/* 页面内容 */}
      </main>
      <footer>
        {/* 页脚内容 */}
        Footer
      </footer>
    </div>
  );
}

export default App;

/* App.css */
.App {
  display: grid;
  min-height: 100vh;
  grid-template-rows: auto 1fr auto;
}

main {
  padding: 1rem;
}

footer {
  background-color: #f5f5f5;
  padding: 1rem;
  text-align: center;
}