如何创建全屏 Material-ui 网格？

Question

我正在尝试使用 material-ui 和 react 创建类似于大多数编辑器/IDE 的布局，并使用 material-ui Grid 进行布局。我有一个顶栏、一个底栏、两侧的侧板和一个中心区域。我的问题是：如何让这个网格占据整个屏幕？

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

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

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

Answer 1

经过一番研究后，我能够使用视口单元和 css 'calc' 函数实现预期的行为（类似 IDE 的布局）。

我使用了两个material-ui网格，即“mainGrid”，方向=“行”（默认）和“middleGrid”，方向=“列”。主要Grid样式：

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

和中间的网格：

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

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

Answer 2

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