My challenge is with the Footer using AppBar when there is no content. It doesn't properly go to the end of the page, only to the end of the content. I want it to stick to the bottom of the page if the content doesn't reach the bottom of the screen. However, if the content extends past the screen, then I want the Footer to be at the bottom of that extended content.
Currently, the Footer is correctly positioned at the bottom of the content when it extends past the screen. But when the content doesn't reach the bottom of the screen, the Footer does not stick to the bottom of the page as desired.
const Footer = () => {
return (
<AppBar position='sticky' sx={{ top: 'auto', bottom: 0 }}>
<Grid container direction='column'>
<Grid item container>
<Grid item xs={0} sm={1} />
<Grid item xs={12} sm={10}>
<h1> info section</h1>
</Grid>
<Grid item xs={0} sm={1} />
</Grid>
<Grid item container>
<Grid item xs={0} sm={1} />
<Grid item xs={12} sm={10}>
<Toolbar disableGutters={true}>
<h1>bottom toolbar</h1>
</Toolbar>
</Grid>
<Grid item xs={0} sm={1} />
</Grid>
</Grid>
</AppBar>
)
}