Question

我有一个Grid容器，其中包含2个Grid项。我已将容器和第二个Grid项的高度设置为100％。第二个Grid项的高度超过了容器的高度，并出现了滚动。

如果有帮助，请参见以下代码。

function App() {
  return (
    <Grid container style={{height: '100%'}}>
      <Grid item xs={12} style={{border: 'solid 1px'}}>
        Header
      </Grid>

      <Grid item xs={12} style={{height: '100%', border: 'solid 1px'}}>
        Content
      </Grid>
    </Grid>
  )
}

https://codesandbox.io/s/8k0xy60nx2

如何使第二个Grid项占据其容器的剩余高度并且不超过该高度？我在这里想念什么？

谢谢。

Answer 1

请注意，父容器溢出了第一项的高度。这是因为您为第二个项目设置了100％的高度，但是您的父母中实际上有2个项目。如果您不希望滚动条，则项的总和必须等于或小于等值。尝试将第一项的高度设置为10％，第二项的高度设置为90％。卷轴将消失

Answer 2

尝试使用direction="column"，

<Grid
  container
  direction="column"
  style={{ border: "solid 5px", height: "100%" }}
>
  <Grid
    item
    style={{ border: "solid 1px", backgroundColor: "yellow" }}
  >
    Header
  </Grid>

  <Grid
    item
    xs
    style={{ border: "solid 1px", backgroundColor: "red" }}
  >
    Content
  </Grid>
</Grid>

Edited Sandbox

希望这对您有帮助...

Answer 3

伙计！这很烦人。

I hacked on the codesandbox a bit to make it closer to my view on this problem.

MDN / Web tech / CSS / max-height 表示如果提供一个百分比，它 将最大高度定义为包含块高度的百分比。

我花了一个小时在 Chrome 开发工具样式调试器中的 dom 树上走来走去，您可以看到 vh 大小的元素朝向根的位置是预期的高度，然后 Mui 网格显示为 { {1}}、max-height 100%

Material-ui网格项目的高度超过了其容器的高度

3 个答案: