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

Question

import * as React from "react";\nimport Container from "@mui/material/Container";\nimport Image from "next/image";\nimport Link from "@/src/Link";\nimport Box from "@mui/material/Box";\nimport Typography from "@mui/material/Typography";\nimport Paper from "@mui/material/Paper";\n\nexport default function GuestFooter() {\n  return (\n    <Paper sx={{marginTop: \'calc(10% + 60px)\', bottom: 0}} component="footer" square variant="outlined">\n      <Container maxWidth="lg">\n        <Box\n          sx={{\n            flexGrow: 1,\n            justifyContent: "center",\n            display: "flex",\n            my:1\n          }}\n        >\n          <Link href="/">\n            <Image priority src="/Logo.svg" width={75} height={30} alt="Logo" />\n          </Link>\n        </Box>\n\n        <Box\n          sx={{\n            flexGrow: 1,\n            justifyContent: "center",\n            display: "flex",\n            mb: 2,\n          }}\n        >\n          <Typography variant="caption" color="initial">\n            Copyright \xc2\xa92022. [] Limited\n          </Typography>\n        </Box>\n      </Container>\n    </Paper>\n  );\n}\n\n

\n

\n

Answer 1

只需添加位置粘性，并将宽度设置为 100%，以便它始终粘在底部，使用Bottom: 0。

\n

 export default function GuestFooter() {\n  return (\n    <Paper sx={{marginTop: 'calc(10% + 60px)',\n    width: '100%',\n    position: 'fixed',\n    bottom: 0,\n    width: '100%'\n    }} component="footer" square variant="outlined">\n      <Container maxWidth="lg">\n        <Box\n          sx={{\n            flexGrow: 1,\n            justifyContent: "center",\n            display: "flex",\n            my:1\n          }}\n        >\n            <div>\n            <Image priority src="/Logo.svg" width={75} height={30} alt="Logo" />\n            </div>\n        </Box>\n\n        <Box\n          sx={{\n            flexGrow: 1,\n            justifyContent: "center",\n            display: "flex",\n            mb: 2,\n          }}\n        >\n          <Typography variant="caption" color="initial">\n            Copyright \xc2\xa92022. [] Limited\n          </Typography>\n        </Box>\n      </Container>\n    </Paper>\n  );\n}\n

\n

对 MUI“Paper”组件进行的更改，该组件包装了整个 JSX：

\n

position: 'sticky',\nbottom: 0\nwidth: '100%',\n

\n

最后结果：

\n

 <Paper sx={{marginTop: 'calc(10% + 60px)',\nposition: 'fixed',\nbottom: 0,\nwidth: '100%'\n}} component="footer" square variant="outlined">\n

\n