Sticky Footer

This layout ensures the footer never renders in the middle of the viewport if the content area is not tall enough. Based on Solved by Flexbox.

Note: the height is altered in the preview to better fit in the screen

Header

Content

Footer

<Box
  sx={{
    display: 'flex',
    flexDirection: 'column',
    minHeight: '100vh'
  }}>
  <Box
    sx={{
      p: 3
    }}>
    Header
  </Box>
  <Box
    sx={{
      flex: '1 1 auto',
      p: 3
    }}>
    Content
  </Box>
  <Box
    sx={{
      p: 3
    }}>
    Footer
  </Box>
</Box><Box
  sx={{
    display: 'flex',
    flexDirection: 'column',
    minHeight: '100vh'
  }}>
  <Box
    sx={{
      p: 3
    }}>
    Header
  </Box>
  <Box
    sx={{
      flex: '1 1 auto',
      p: 3
    }}>
    Content
  </Box>
  <Box
    sx={{
      p: 3
    }}>
    Footer
  </Box>
</Box>

Sidebar