CODEWITHSUNDEEP
reactjsmaterial-uifooter
Internazionaleauto
Internazionaleauto

Reputation: 11

Material UI React: Problems with the footer not staying at the bottom of the page

We have an application made in react and we use material ui.

we want the footer to only display at the bottom of the page and not scroll with the content.

We would like a footer like without scroll which is just in the below of all components.

We tried different solutions in css like display:flex, position: absolut but it doesn't resolve. Here is one footer code

App Layout

1. CSS Part

const useStyles = makeStyles((theme) => ({
  appWrapper: {
    display: "flex",
    height: "100vh",
    overflow: "hidden",
    flexDirection: "column"
  },
  appBodyWrapper: {
    flexGrow: 1,
    overflow: "auto",
  },
  appFooterWrapper: {
    height: " 28px",
    minHeight: "28px",
    backgroundColor: "#000",
    padding: "10px 10px"
  },
}));


**2. JSX Part**

      <div className={classes.appWrapper}>
        <div className={classes.appBodyWrapper}>
componets
        </div>
        <footer className={classes.appFooterWrapper}></footer>
      </div>

This is the link of the last test I did https://internazionaleauto-4dro9vwqr-internazionaleauto.vercel.app/

We would also like the footer to be seen immediately from the desktop and not after a scroll, also as you can see there is a problem that I have to scroll twice to see the footer instead from mobile I would like to see it only at the end of the page and for it to remain there

Upvotes: 0

Views: 447

Answers (1)

MarkoPl
MarkoPl

Reputation: 106

If I understood you correctly you want to fix it to the bottom of the page. By adding this code to your footer it should work.

  appFooterWrapper: {
  height: " 28px",
  minHeight: "28px",
  backgroundColor: "#000",
  padding: "10px 10px",
  position: fixed,
  bottom: 0,
  left: 0,
  width: 100vw,
},

Upvotes: 0

Related Questions