React Material UI - 网格列高度属性

Question

请参考图片进行说明。 我有两个 div，一个是浏览器总高度的 20%，另一个应该是 80%。 我正在使用 Material UI Grid 进行定位。 看起来像：

<Grid container direction={column}>
    <Grid item>1</Grid>
    <Grid item>2</Grid>
</Grid>

为了获得结果，我应该如何处理 CSS。 我试图将第一个网格项设置为高度 20%，将第二个网格项设置为 80%，但这不是我需要的。

Answer 1

如果您想在图片中显示相同的内容，使用%您可以使用vh Viewport-percentage lengths 。 就像是：

<Grid container direction={"column"}>
    <Grid item className={classes.item20}>
      1
    </Grid>
    <Grid item className={classes.item80}>
      2
    </Grid>
</Grid>

样式：

item20: {
  height: "20vh",
},
item80: {
  height: "80vh",
}

这是一个工作示例。