如何使 Grid 项目的所有内容拉伸到底部，减去排版？答案

【问题标题】：How do I make all the contents of a Grid item stretch to the bottom, minus the typography?如何使 Grid 项目的所有内容拉伸到底部，减去排版？
【发布时间】：2021-04-24 04:06:11
【问题描述】：

我在一个 Grid 容器中有四列，每列的结构如下：

    <Grid item>
       <Typography>Big Title 1</Typography>
         <Card className={classes.stretchMe}>
            <CardContent>
                Content
            </CardContent>
         </Card>
    </Grid>

我希望带有 stretchMe 类的 Card 拉伸到父 Grid 项的底部，但是因为每个 Card 上面都有一个 Typography 组件，它会拉伸到父 div 的高度之外。

如何让所有卡片拉伸到父 Grid 项目的底部而不进一步（即减去排版的高度）？

下面是稍微复杂一点的代码：

import React from 'react';

const useStyles = makeStyles(theme => ({
  divider: {
    borderBottom: `1px solid ${theme.palette.divider}`,
  },
  stretchMe: {
    height: '100%',
  },
}));

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

  return (
      <Grid container item xs={12} spacing={3} justify="space-between" alignItems="stretch">
        <Grid item xl={2} lg={2} md={6} xs={12} >
          <Typography variant="h4" >
            Big Title 1 
          </Typography>
          <Card className={classes.stretchMe}>
            <CardContent className={classes.divider}>
              <Typography variant="h6">Little Title 1</Typography>
              <Avatar />
            </CardContent>
            <CardContent className={classes.divider}>
              <Typography variant="h6">Little Title 2</Typography>
              <Typography variant="h4">Content</Typography>
            </CardContent>
            <CardContent className={classes.divider}>
              <Grid container>
                <Grid item xs={6}>
                  <Typography variant="h6">Little Title 3</Typography>
                  <Typography variant="h4">Content</Typography>
                </Grid>
                <Grid item xs={6}>
                  <Typography variant="h6">Little Title 4</Typography>
                  <Typography variant="h4">Content</Typography>
                </Grid>
              </Grid>
            </CardContent>
          </Card>
        </Grid>
        <Grid item xl={4} lg={4} md={6} xs={12} >
          <Typography variant="h4" >
            Big Title 2
          </Typography>
          <Card className="classes.stretchMe">
            <CardContent>Content</CardContent>
          </Card>
        </Grid>
        <Grid item xl={3} lg={3} md={6} xs={12} >
          <Typography variant="h4" >
            Big Title 3
          </Typography>
          <Card className="classes.stretchMe">
            <CardContent>Content</CardContent>
          </Card>
        </Grid>
        <Grid item xl={3} lg={3} md={6} xs={12}>
          <Typography variant="h4">
            Big Title 4
          </Typography>
          <Card className="classes.stretchMe">
            <CardContent className={classes.divider}>
              <div className={classes.teamProfile}>
                <Avatar/>
              </div>
              <div className={classes.teamProfile}>
                <Avatar/>
              </div>
              <div className={classes.teamProfile}>
                <Avatar/>
              </div>
              <div className={classes.teamProfile}>
                <Avatar/>
              </div>
            </CardContent>
          </Card>
        </Grid>
    </Grid>
  );
};

export default Cards;

非常感谢，

凯蒂

编辑

这就是问题所在 - Grid 项目超出了 Grid 容器

这是所需的输出：

我的怀疑是大头衔正在压低卡牌？

【问题讨论】：

使用 spacing={0} 属性删除间距有帮助吗？
请您上传所需的输出图像吗？
嗨 roa - 我已尝试多次添加图像（希望与我的原始帖子一起添加），但似乎有一个错误，并且出现了完全错误的图像！还有其他想法吗？我在一家屏蔽大多数网站的公司工作 - grrrr！
@FranAcuna - 您的意思是向 Grid 容器添加间距={0} 吗？我已经尝试过了，不幸的是它没有帮助，但如果我误解了你的建议，请告诉我。谢谢！
@roa - 我已经能够在这里放一张图片：imgur.com/a/G7ruSVH希望这会有所帮助！

标签： css reactjs material-ui

【解决方案1】：

使用JSX 将道具作为变量传递，而不是作为字符串传递。做：

<Card className={classes.stretchMe}>

代替：

<Card className="classes.stretchMe">

更新

在卡片上使用flex:1，以便他们使用所有剩余空间
将子Grids 与container 和direction="column" 设置为正确放置元素。

代码应如下所示：

const useStyles = makeStyles((theme) => ({
    divider: {
    borderBottom: `1px solid ${theme.palette.divider}`
    },
    stretchMe: {
    height: "100%",
    flex: 1
    }
}));

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

    return (
    <Grid
        style={{backgroundColor:"cyan"}}
        container
        xs={12}
        spacing={3}
        justify="space-between"
        alignItems="stretch"
    >
        <Grid container direction="column" item xl={2} lg={2} md={6} xs={12}>
        <Typography variant="h4">Big Title 1</Typography>
        <Card className={classes.stretchMe}>
            <CardContent className={classes.divider}>
            <Typography variant="h6">Little Title 1</Typography>
            <Avatar />
            </CardContent>
            <CardContent className={classes.divider}>
            <Typography variant="h6">Little Title 2</Typography>
            <Typography variant="h4">Content</Typography>
            </CardContent>
            <CardContent className={classes.divider}>
            <Grid container>
                <Grid item xs={6}>
                <Typography variant="h6">Little Title 3</Typography>
                <Typography variant="h4">Content</Typography>
                </Grid>
                <Grid item xs={6}>
                <Typography variant="h6">Little Title 4</Typography>
                <Typography variant="h4">Content</Typography>
                </Grid>
            </Grid>
            </CardContent>
        </Card>
        </Grid>
        <Grid container direction="column" item xl={4} lg={4} md={6} xs={12}>
        <Typography variant="h4">Big Title 2</Typography>
        <Card className={classes.stretchMe}>
            <CardContent>Content</CardContent>
        </Card>
        </Grid>
        <Grid container direction="column" item  xl={3} lg={3} md={6} xs={12}>
        <Typography variant="h4">Big Title 3</Typography>
        <Card className={classes.stretchMe}>
            <CardContent>Content</CardContent>
        </Card>
        </Grid>
        <Grid container direction="column" item xl={3} lg={3} md={6} xs={12}>
        <Typography variant="h4">Big Title 4</Typography>
        <Card className={classes.stretchMe}>
            <CardContent className={classes.divider}>
            <div className={classes.teamProfile}>
                <Avatar />
            </div>
            <div className={classes.teamProfile}>
                <Avatar />
            </div>
            <div className={classes.teamProfile}>
                <Avatar />
            </div>
            <div className={classes.teamProfile}>
                <Avatar />
            </div>
            </CardContent>
        </Card>
        </Grid>
    </Grid>
    );
};

export default Cards;

【讨论】：

感谢您的回复。不幸的是，这不是问题。没错，我没有将它作为道具传递，但这只是将代码复制到 stackoverflow 时的错字。我的真实代码确实将它作为道具传递。我在想这些方面的东西？ wpbeaches.com/aligning-last-item-bottom-container-flexbox 但我必须在每个中都有一个空 div，而不是描述的按钮来强制整个东西拉伸。
哦，你是对的！我认为问题在于卡片没有拉伸，但我为网格背景着色，现在我看到卡片在它们之外延伸。
呵呵！好吧，如果您有任何解决问题的脑电波，我仍在寻找解决方案，所以请告诉我。非常感谢！ :)
我更新了答案，得到了here的帮助。
感谢 FranAcuna - 我觉得我的问题措辞不够好，所以我再次发布。有人给出了一个完美的答案，看起来和你的一样。 (stackoverflow.com/questions/65815511/…) 非常感谢！我会把它标记为正确答案。

【解决方案2】：

这是因为您将 className 属性作为字符串而不是变量传递。

所以，正确的格式应该是className={classes.stretchMe}

import React from 'react';

const useStyles = makeStyles((theme) => ({
  root: {
    height: "100%"
  },
  divider: {
    borderBottom: `1px solid ${theme.palette.divider}`,
    "&:last-child": {
      flex: "1"
    }
  },
  stretchMe: {
    display: "flex",
    flexDirection: "column",
    flex: "1"
  },
  gridItem: {
    display: "flex",
    flexDirection: "column"
  }
}));

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

  return (
    <Grid container spacing={2} className={classes.root}>
      <Grid item xs={3} className={classes.gridItem}>
        <Typography variant="h4">Big Title 1</Typography>
        <Card className={classes.stretchMe}>
          <CardContent className={classes.divider}>
            <Typography variant="h6">Little Title 1</Typography>
            <Avatar />
          </CardContent>
          <CardContent className={classes.divider}>
            <Typography variant="h6">Little Title 2</Typography>
            <Typography variant="h4">Content</Typography>
          </CardContent>
          <CardContent className={classes.divider}>
            <Grid container direction="row">
              <Grid item xs={6}>
                <Typography variant="h6">Little Title 3</Typography>
                <Typography variant="h4">Content</Typography>
              </Grid>
              <Grid item xs={6}>
                <Typography variant="h6">Little Title 4</Typography>
                <Typography variant="h4">Content</Typography>
              </Grid>
            </Grid>
          </CardContent>
        </Card>
      </Grid>
      <Grid item xs={3} className={classes.gridItem}>
        <Typography variant="h4">Big Title 2</Typography>
        <Card className={classes.stretchMe}>
          <CardContent>Content</CardContent>
        </Card>
      </Grid>
      <Grid item xs={3} className={classes.gridItem}>
        <Typography variant="h4">Big Title 3</Typography>
        <Card className={classes.stretchMe}>
          <CardContent>Content</CardContent>
        </Card>
      </Grid>
      <Grid item xs={3} className={classes.gridItem}>
        <Typography variant="h4">Big Title 4</Typography>
        <Card className={classes.stretchMe}>
          <CardContent className={classes.divider}>
            <div className={classes.teamProfile}>
              <Avatar />
            </div>
            <div className={classes.teamProfile}>
              <Avatar />
            </div>
            <div className={classes.teamProfile}>
              <Avatar />
            </div>
            <div className={classes.teamProfile}>
              <Avatar />
            </div>
          </CardContent>
        </Card>
      </Grid>
    </Grid>
  );
};

export default Cards;

【讨论】：

感谢您的回复。正如我在下面对 FranAcuna 所说的那样，这不是问题。没错，我没有将它作为道具传递，但这只是将代码复制到 stackoverflow 时的错字。我的真实代码确实将它作为道具传递。我在想这些方面的东西？ wpbeaches.com/aligning-last-item-bottom-container-flexbox 但我必须在每个中都有一个空 div，而不是描述的按钮来强制整个东西拉伸。
看来你要使用自定义的flexbox了。我会更新我的答案。
谢谢 roa - 理想情况下我会使用 Material UI 功能和网格。你知道是否有可能实现他们在上面的链接中演示的内容，但使用 Grids 而不是自定义 flexbox？再次感谢
我刚刚更新，没有使用 flexbox。请检查。
谢谢 roa - 我仍然遇到网格项与父网格容器重叠的相同问题。我在原始帖子中添加了问题的图像，因为图像上传错误现在似乎已解决。