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>
);
}
最佳答案
刚刚添加位置粘性,并将宽度设置为 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">
关于css - 如何将 MUI 中的页脚推到最底部并使其粘住?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72440972/