In the process of developing my react app with MUI framework, I encountered various challenges in creating a sticky footer at the bottom of my screen. After exploring different solutions, one approach that I found most satisfactory is as follows:
export default function Footer() {
return (
<Box
sx={{
display: 'flex',
flexDirection: 'column',
width:'100%',
overflow:'hidden',
bottom:'0',
left:'0',
}}
>
<CssBaseline />
<Box
component="footer"
sx={{
py: 3,
px: 2,
mt: 'auto',
backgroundColor: (theme) =>
theme.palette.mode === 'light'
? theme.palette.grey[200]
: theme.palette.grey[800],
}}
>
<Container maxWidth="sm">
<Typography variant="body1">
Add stuff here
</Typography>
<Copyright />
</Container>
</Box>
</Box>
);
}
However, a downside to this solution is that when there is minimal content on the page, the footer may end up in the middle of the screen. One workaround attempted was adding min-height:100vh to the footer component, but this created excessive white space above the footer when there was sufficient content present.
Is there a way to implement a sticky footer that remains at the bottom of the screen without getting stuck in the middle or leaving excess white space?
The footer component is called within my app.js file.
function App() {
return (
<>
<Navbar />
<Routes>
<Route path="/" element={<Home />} />
<Route path='/login' element={<Login />} />
<Route path="/test" element={<Test />} />
<Route path="/private" element={<Private />}>
<Route path="/private/private-home" element={<PrivateHome />} />
<Route path="/private/dashboard" element={<Dashboard />} />
</Route>
</Routes>
<Footer />
</>
);
}
export default App;