How to push the footer in MUI at the very bottom and make it stick?

user_1239189 0
Viewed 1798
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>
  );
}

enter image description here

material-ui reactjs css
1 Answers

Just added the position sticky, and set the width to a 100% so it's always sticked to the bottom, using 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>
  );
}

Changes done on the MUI 'Paper' component, which wraps your whole JSX:

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

Final Result:

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