如何创建全屏材质用户界面网格？

Question

我正在尝试使用material-ui创建与大多数编辑器/ IDE相似的布局，并使用material-ui Grid作为布局进行反应。 我有一个顶部栏，一个底部栏，两侧的侧面板和一个中心区域。我的问题是：如何使该网格占据整个屏幕？

现在，它只能增长到内部元素最小高度。我希望两个侧面板都垂直填充屏幕。

这是一个简单的示例，其布局与我尝试实现的布局完全相同：https://codesandbox.io/s/material-demo-0pl9e

我想做的是通过仅扩展中间容器来使网格占据整个屏幕。

Answer 1

经过一些研究，我能够使用视口单元和css的“ calc”功能实现预期的行为（类似于IDE的布局）。

我使用了两个材质UI网格，即方向为“行”（默认）的“ mainGrid”和方向为“ column”的“ middleGrid”。 mainGrid样式：

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

和middleGrid：

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

APPBAR_HEIGHT是一个常量，用于定义顶部导航栏的固定高度。使用此方案，很容易获得正确的全屏布局。结果将保存在问题中共享的相同代码和框中：https://codesandbox.io/s/material-demo-0pl9e

Answer 2

<Grid classes={{root: {width: '100%'}}}>
    Grid content
</Grid>