CODEWITHSUNDEEP
cssreactjsmaterial-ui
Ali Gajani
Ali Gajani

Reputation: 15089

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

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

Upvotes: 6

Views: 28147

Answers (3)

Mudassir Rafiq
Mudassir Rafiq

Reputation: 51

Wrap all your children components (not Footer) with a Box like this:

<Box display={"flex"} minHeight={'calc(100vh - FOOTERHEIGHTpx)'}>
{children}
</Box>

Or you can add following properties in your individual page components:

display={"flex"} minHeight={'calc(100vh - FOOTERHEIGHTpx)'}

Don't forget to replace FOOTERHEIGHT with the actual height of your Footer component.

This works perfectly. With this method you can use standard styling for your footer component without using any additional properties like position and bottom.

Upvotes: 0

Samuel Paredes
Samuel Paredes

Reputation: 131

I had the same problem, so i found the 'cleanest' solution to that.

You can create a Box Component as a direct parent of your Footer Component with the following styles

<Box
    sx={{
      display: 'flex',
      flexDirection: 'column',
      minHeight: '100vh',
    }}
  > 
  <YourFooterComponet/>
</Box>

In your component footer use margin top: auto. Something like this:

<Box
  sx={{
    borderTop: "1px solid #000",
    marginTop: "auto",
    p: 4,
  }}
  component="footer"
>
 {your-content}
</Box>

This aproach guarantees the footer always at the final of the content body page. I found the solution on this references:

Upvotes: 0

EDev
EDev

Reputation: 460

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">

Upvotes: 14

Related Questions