IT技术 - 使 Material UI Grid 项的子项拉伸以适应父容器的剩余高度 - 吾爱随笔录

使 Material UI Grid 项的子项拉伸以适应父容器的剩余高度

IT技术 javascript css reactjs material-ui

2021-04-30 11:35:59

一、现貌

我有一个带有 4 个网格项目的 Material UI 网格容器。在每个 Grid 项中都有一个 Typography 组件，其中包含一个标题和一个带有一些内容的 Card，如下所示：

2. 期望的外观

我希望卡片填充网格项目的剩余高度而不超过它。这是我想要的输出：

3.外观不良（卡高=100%）

我曾尝试将卡片的高度设为 100%，但这意味着每张卡片都采用其父级（网格项）的高度，并且父级的高度 = 版式 + 卡片（而不是剩余空间减去版式），所以结果是 Card 然后超过了父 Grid 项目的高度，如下所示：

克服这个问题的最佳方法是什么？我正在使用 Material UI 的 Grid 使断点变得简单并与我的项目的其余部分保持一致，因此理想情况下，解决方案将使用这种方法。

这是代码：

import React from 'react';

const useStyles = makeStyles(theme => ({
   // stretch: { height: '100%' }, // Un-commenting this results in undesirable appearance 3 (see image 3 above)
    outline: { border: '1px solid red' },
}));

const Sections= () => {
  const classes = useStyles();

  return (
    <Grid container spacing={3} justify="space-between" alignItems="stretch" className={classes.outline}>
      <Grid item xl={2} lg={2} md={6} xs={12} className={classes.outline}>
          <Typography className={classes.outline}>Big title 1</Typography>
          <Card className={classes.stretch}><CardContent>Lots and lots and lots and lots and lots and lots of content</CardContent></Card>
      </Grid>
   <Grid item xl={4} lg={4} md={6} xs={12} className={classes.outline}>
          <Typography className={classes.outline}>Big title 2</Typography>
          <Card className={classes.stretch}><CardContent>Not much content</CardContent></Card>
   </Grid>
   <Grid item xl={3} lg={3} md={6} xs={12} className={classes.outline}>
          <Typography className={classes.outline}>Big title 3</Typography>
          <Card className={classes.stretch}><CardContent>Not much content</CardContent></Card>
   </Grid>
   <Grid item xl={3} lg={3} md={6} xs={12} className={classes.outline}>
          <Typography className={classes.outline}>Big title 4</Typography>
          <Card className={classes.stretch}><CardContent>Not much content</CardContent></Card>
   </Grid>
</Grid>
  );
};


export default Sections;

非常感谢，

凯蒂

2个回答

要解决此问题，您需要为每个单独的 Grid Item 设置高度。然后你可以显示 Grid Item 以“column”的 flex-direction 弯曲。接下来，您可以像以前一样将卡片的高度设置为 100%。Material-UI 网格中的默认显示机制未设置为 flex，因此卡片将延伸到边框之外，因为它们使用诸如负边距之类的东西。

代码如下：

// imports omitted

const useStyles = makeStyles(theme => ({
  stretch: { height: "100%" },
  item: { display: "flex", flexDirection: "column" } // KEY CHANGES
}));

export const Sections = () => {
  return (
    <Grid container spacing={2} justify="space-between" alignItems="stretch">
      <Item xl={2} lg={2} md={6} xs={12} title="Big Title 1" content="Lots and lots and lots and lots and lots and lots of content!" />
      <Item xl={4} lg={4} md={6} xs={12} title="Big Title 2" content="Not much content" />
      <Item xl={3} lg={3} md={6} xs={12} title="Big Title 3" content="Not much content" />
      <Item xl={3} lg={3} md={6} xs={12} title="Big Title 4" content="Not much content" />
    </Grid>
  );
}

const Item = ({ title, content, ...rest }) => {
  const classes = useStyles();

  return (
    <Grid className={classes.item} item {...rest}>
      <Typography>{title}</Typography>
      <Card className={classes.stretch}>
        <CardContent>{content}</CardContent>
      </Card>
    </Grid>
  );
};

结帐stackblitz一个活生生的例子。

要Card始终保持剩余高度，请给一个高度Typography。假设Typographyis的高度，20px然后将其高度设置CardItem为100% - (height of the typography_ie；`高度：'计算（100% - 20px）'。它将占用剩余的高度。

const useStyles = makeStyles((theme) => ({
    stretch: {
        height: 'calc(100% - 20px)'
    }, // Un-commenting this results in undesirable appearance 3 (see image 3 above)
    outline: { border: "1px solid red" }
}));

<Grid
  container
  spacing={3}
  justify="space-between"
  alignItems="stretch"
  className={classes.outline}>
  <Grid item xl={2} lg={2} md={6} xs={12} className={classes.outline}>
    <Typography style={{height:'20px'}} className={classes.outline}>Big title 1</Typography>
    <Card className={classes.stretch}>
      <CardContent>
        Lots and lots and lots and lots and lots and lots of content
      </CardContent>
    </Card>
  </Grid>
  <Grid item xl={4} lg={4} md={6} xs={12} className={classes.outline}>
    <Typography style={{height:'20px'}} className={classes.outline}>Big title 2</Typography>
    <Card className={classes.stretch}>
      <CardContent>Not much content</CardContent>
    </Card>
  </Grid>
  <Grid item xl={3} lg={3} md={6} xs={12} className={classes.outline}>
    <Typography style={{height:'20px'}} className={classes.outline}>Big title 3</Typography>
    <Card className={classes.stretch}>
      <CardContent>Not much content</CardContent>
    </Card>
  </Grid>
  <Grid item xl={3} lg={3} md={6} xs={12} className={classes.outline}>
    <Typography style={{height:'20px'}} className={classes.outline}>Big title 4</Typography>
    <Card className={classes.stretch}>
      <CardContent>Not much content</CardContent>
    </Card>
  </Grid>
</Grid>

其它你可能感兴趣的问题

上一篇类型错误：无法读取未定义的属性“byteLength” - AWS S3 上传下一篇React DatePicker 日历显示在表头后面