Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Sticky Footer Incorrect Placement in React

Would appreciate if someone could help me understand the problem. I have a simple webpage with MUI components, and I would like to add a sticky footer at the very bottom.

However, the footer ends up in the middle of the page with the following structure of the App.jsx:

function App() {
  return (
    <BrowserRouter>
    <Header />
      <ThemeProvider theme={theme}>
        <Container component='main' sx={{ padding: '0px!important', maxWidth: '100%!important' }}>
        <Box>
          <Routes>
            <Route path='/' element={<Home/>}/>
          </Routes>
        </Box>
        </Container>
      </ThemeProvider>
    <Footer />
    </BrowserRouter>
  )
}

and the following Footer.jsx:

export default function Footer () {
  return (
    <Box
      display={'flex'}
      flexDirection={'column'}
      width={'100vw'}
      height={'100vh'}
      component={'footer'}
     >
       <Box
         height={'200px'}
         display={'flex'}
         justifyContent={'center'}
         alignItems={'center'}
         sx={{ backgroundColor: '#333' }}
       >
         <Typography> © 2023 DS </Typography>
       </Box>
     </Box>
  )
}

This is how it looks like:

enter image description here

When I move Footer.jsx to the Home.jsx, the footer ends up at the bottom where it should be.

Home.jsx

export default function Home () {
  return (
    <Box
      display={'flex'}
      flexDirection={'column'}
      height={'100vh'}
      width={'100vw'}
    >
      <Hero />
      <Slider />
      <Logos />
      <Services />
      <Banner />
      <Portfolio />
      <Contact />
      <Footer />
    </Box>
  )
}

And this is how it should look like:

enter image description here

Why placing <Footer /> component in the App.jsx does not work in the same way?
How can this be fixed so that Footer is in the App?

EDIT: Sandbox code is here.

I tried adding display={flex} into the App.jsx, I also tried marginTop and minHeight as per suggestions in other posts.

Tags:

2

Answers


  1. 0

    Inside of the Home component you’re defining flex styles on Box:

    <Box
  display={'flex'}
  flexDirection={'column'}
  height={'100vh'}
  width={'100vw'}
>

    These properties you’ve added – specifically display={flex} and flexDirection={column} – are telling the page to stack everything nested inside of it vertically. Your App component has no such styles.

    Edit: If you wanted to include the footer in your App component you would need something like this, apply flex styles to a wrapper around your header/footer/everything else:

    function App() {
  return (
    <BrowserRouter>
    <div styles={{ display: 'flex', flexDirection: 'column' }}>
      <Header />
        <ThemeProvider theme={theme}>
          <Container component='main' sx={{ padding: '0px!important', maxWidth: '100%!important' }}>
          <Box>
            <Routes>
              <Route path='/' element={<Home/>}/>
            </Routes>
          </Box>
          </Container>
        </ThemeProvider>
      <Footer />
    </div>    
    </BrowserRouter>
  )
}
    Login or Signup to reply.
  2. 0

    If we inspected the page, you’ll notice that the root div is actually taking only 100vh, and the reset of the content in the home is just overflowing:
    100vh declaration causing overflow

    Looking at the Home Component, you’ll see that a fixed height is given to it which is causing the content to overflow and the default value for overflow is visible if we set overflow="hidden", you’ll see that the footer is actually at the bottom. But we also need to see the content, so we shouldn’t set the height to a fixed value since we want the content to determine the height of the box (the default height ).

    Removing the fixed height given to the Box in the Home component will resolve the issue as the content will not overflow and will push the footer to its correct position at the bottom.

    export default function Home() {
  return (
    <Box
      display={"flex"}
      flexDirection={"column"}
      height={"100vh"} //remove this declaration
      width={"100%"}
    >
      This is home page
      {[...Array(100).keys()].map((item, i) => (
        <Box key={i}>{item}</Box>
      ))}
      {/* <Footer /> */}
    </Box>
  );
}

    here the root div has expanded because the height of the Box in the Home component became auto.
    removing 100vh make the root div take the full height

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search