Trying to build a dashboard using chakra UI

Question

I'm really struggling to build my dashboard in my React App using Chakra UI right now. I'm trying to create a page that has a header and a footer, each with a fixed height. Both should stay on screen at all times. Between the header and the Footer, there should be a Content area and a Nav Area. Now the goal is that I can scroll inside the content area when the content inside of that overflows the page. The header and footer should always be visible.

However I can't get that to work. It always extends the page and moves the footer outside of view. None of the overflow options inside the Grid Item or the Box below it seem to work and I'm really out of ideas at this point. Below is my current code.

function Hello() {
  return (
    <Flex flexDirection="column" minHeight="100vh">
      <Box height="50px">
        <Button>Header</Button>
      </Box>

      <SimpleGrid
        templateAreas={`"nav content"`}
        gridTemplateRows="auto"
        gridTemplateColumns="300px 1fr"
        height="100%"
        gap="1"
        style={{ flex: '1' }}
      >
        <GridItem pl="2" area="nav">
          <Button>Nav</Button>
        </GridItem>
        <GridItem pl="2" area="content" height="100%">
          <Box maxHeight="100%" overflowY="auto">
            <SimpleGrid height="100%" gridTemplateColumns="1fr 1fr">
              <Box height="2000px" bg="#66b2ff" />
              <Box height="2000px" bg="#ba66ff" />
            </SimpleGrid>
          </Box>
        </GridItem>
      </SimpleGrid>
      <Box height="50px">
        <Button>Footer</Button>
      </Box>
    </Flex>
  );
}

Answer 1

You can add position: fixed in header and footer boxes to make sure Header and Footer is always displayed in the screen.

And, you can adjust Header and Footer position using top, left, right, bottom properties.

Here is the updated code:

function Hello() {
  return (
    <Flex flexDirection="column" minHeight="100vh">
      {/* Added position:fixed  */}
      <Box position="fixed" top="0" left="0" right="0" zIndex={2} height="50px">
        <Button>Header</Button>
      </Box>

      <SimpleGrid
        templateAreas={`"nav content"`}
        gridTemplateRows="auto"
        gridTemplateColumns="300px 1fr"
        height="100%"
        gap="1"
        style={{ flex: '1' }}
      >
        <GridItem pl="2" area="nav">
          <Button>Nav</Button>
        </GridItem>
        <GridItem pl="2" area="content" height="100%">
          <Box maxHeight="100%" overflowY="auto">
            <SimpleGrid height="100%" gridTemplateColumns="1fr 1fr">
              <Box height="2000px" bg="#66b2ff" />
              <Box height="2000px" bg="#ba66ff" />
            </SimpleGrid>
          </Box>
        </GridItem>
      </SimpleGrid>
      {/* Added position:fixed  */}
      <Box position="fixed" bottom="0" left="0" right="0" height="50px" zIndex={2}>
        <Button>Footer</Button>
      </Box>
    </Flex>
  );
}