如何使卡片（材质ui）达到相同的高度？答案

【问题标题】：How to achieve same height for card(material ui)?如何使卡片（材质ui）达到相同的高度？
【发布时间】：2021-09-28 13:03:39
【问题描述】：

我在 material-ui 的网格列表中有要渲染的卡片。每当内容（文本）卡片高度变化时，每张卡片的顶部都有一个图像文件，其余部分有一些内容。到目前为止，我已经尝试了大多数方法来使每张卡都达到相同的高度，但都没有奏效。我在下面提供代码框链接。

working example of cards in grid list

【问题讨论】：

请参阅How to Ask。您需要在此处显示您的代码。

标签： javascript reactjs material-ui

【解决方案1】：

由于您的内容区域卡片（类名称为“content”）为每张卡片都有固定的高度，因此您需要确保内容文本相同，否则您可以像这样为内容卡片指定高度：

 content: {
    height : "200px"
  },

这将产生这个作为输出：

但是，这里内容卡的高度是硬编码的，因此您需要确保内容大小相应匹配。

【讨论】：

我也尝试过这种方式，它给了我固定卡片的高度，但内容按钮的位置发生了变化。我希望它们固定在卡的底部。有什么办法可以实现吗？
您需要像这样在您的内容样式中添加 display flex -> Picture 。此外，您需要确保显示相同长度的文本内容，因此对于长文本，最好显示一个固定长度的字符串并添加一个阅读更多类型的按钮（这将具有完整的内容字符串），以便卡片看起来均匀。

【解决方案2】：

在CardContent 样式中，您应该指定 maxHeight 并使其溢出。比如：

<CardContent
                style={{
                  paddingBottom: "0%",
                  maxHeight: "100px",
                  overflow: "auto"
                }}>

【讨论】：