Question

我想在网格中提供重要的ui卡，其中包含本demo中的高图。如果您固定卡的大小，则内容无法正确调整。那是我不怎么解决的第一个问题？

第二个问题是两张卡具有不同的内容，如果我没有设置一定的像素尺寸以适合所有屏幕尺寸，我想知道如何最好地使两张卡的尺寸相等？

const styles = (theme: Theme) =>
  createStyles({
    card: {
      width: "200px",
      height: "222px"
    }
  });

class TestCardTwo extends React.Component<WithStyles<typeof styles>> {
  render() {
    return (
      <Card className={this.props.classes.card}>
        <CardHeader titleTypographyProps={{ variant: "h6" }} title="Headline" />
        <CardContent>
          <TestChart />
          <Typography color="textSecondary" gutterBottom>
            Word of the Day
        </Typography>
        </CardContent>
      </Card>
    );
  }
}

Answer 1

在API中，我们可以阅读：

高度：数字，字符串，空值

...

默认情况下（为null时），高度是根据包含元素的偏移高度计算的；如果包含元素的高度为0，则为400像素。

因此，您的图表高度为400像素，应为图表或图表容器设置正确的高度。相似的问题：http://jsfiddle.net/BlackLabel/n3wcLhxs/

要将卡片大小调整到整个屏幕高度，可以使用vh单位：

card: {
  height: "100vh"
}

实时演示：https://codesandbox.io/s/j23z6lqp03

如何在实际用户界面中将卡片内容调整为其大小？

1 个答案: