css - 如何将 MUI 中的页脚推到最底部并使其粘住？

Question

import * as React from "react";
import Container from "@mui/material/Container";
import Image from "next/image";
import Link from "@/src/Link";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import Paper from "@mui/material/Paper";

export default function GuestFooter() {
  return (
    <Paper sx={{marginTop: 'calc(10% + 60px)', bottom: 0}} component="footer" square variant="outlined">
      <Container maxWidth="lg">
        <Box
          sx={{
            flexGrow: 1,
            justifyContent: "center",
            display: "flex",
            my:1
          }}
        >
          <Link href="/">
            <Image priority src="/Logo.svg" width={75} height={30} alt="Logo" />
          </Link>
        </Box>

        <Box
          sx={{
            flexGrow: 1,
            justifyContent: "center",
            display: "flex",
            mb: 2,
          }}
        >
          <Typography variant="caption" color="initial">
            Copyright ©2022. [] Limited
          </Typography>
        </Box>
      </Container>
    </Paper>
  );
}

Answer 1

刚刚添加位置粘性，并将宽度设置为 100%，因此它始终粘在底部，使用 bottom: 0。

 export default function GuestFooter() {
  return (
    <Paper sx={{marginTop: 'calc(10% + 60px)',
    width: '100%',
    position: 'fixed',
    bottom: 0,
    width: '100%'
    }} component="footer" square variant="outlined">
      <Container maxWidth="lg">
        <Box
          sx={{
            flexGrow: 1,
            justifyContent: "center",
            display: "flex",
            my:1
          }}
        >
            <div>
            <Image priority src="/Logo.svg" width={75} height={30} alt="Logo" />
            </div>
        </Box>

        <Box
          sx={{
            flexGrow: 1,
            justifyContent: "center",
            display: "flex",
            mb: 2,
          }}
        >
          <Typography variant="caption" color="initial">
            Copyright ©2022. [] Limited
          </Typography>
        </Box>
      </Container>
    </Paper>
  );
}

更改 在 MUI“Paper”组件上完成，它包装了您的整个 JSX:

position: 'sticky',
bottom: 0
width: '100%',

最终结果:

 <Paper sx={{marginTop: 'calc(10% + 60px)',
position: 'fixed',
bottom: 0,
width: '100%'
}} component="footer" square variant="outlined">