How to create a full screen material-ui grid?

Question

I'm trying to create a layout similar to most editors/IDEs using material-ui and react, using material-ui Grid for the layout. I have a top bar, a bottom bar, side panels on both sides and a center area. My question is: how to make this grid occupy the entire screen?

The way it is now, it only grows as far as the inner elements min-heights. I want both side panels to fill the screen vertically.

Here is a simple example with exactly the same layout I'm trying to implement: https://codesandbox.io/s/material-demo-0pl9e

What I'm trying to do is to make the grid occupy the entire screen by expanding only the middle container.

Answer 1

After a little research, I was able to achieve the expected behavior (the IDE-like layout) using viewport units and the css 'calc' function.

I used two material-ui Grids, namely 'mainGrid', with direction='row' (default) and a 'middleGrid', with direction='column'. The mainGrid style:

mainGrid: {
    width: '100vw',
    height: '100vh',
    spacing: 0,
    justify: 'space-around'
  }

And the middleGrid:

middleGrid: {
    height: `calc(100vh - ${uiDefault.APPBAR_HEIGHT})`,
    spacing: 0,
    direction: 'column'
  }

APPBAR_HEIGHT is a constant defining the fixed height of my top navigation bar. Using this scheme, its easy to get the proper, full screen layout. Results are saved in the same codesandbox shared in the question: https://codesandbox.io/s/material-demo-0pl9e

Answer 2

<Container 
      style={{
        border: "solid",
        minWidth: "100%",
        height: "100vh",
      }}
    > 
<Content/>
</Container>

border: "solid", (for visual purposes you can delete this) you can use <Grid> insted