Javascript 材质Ui图纸组件不适合父组件高度

我使用

纸张

组件，其中包含

卡片

组件，我希望其高度适合整页屏幕。我试图重现问题并使其变得简单，因此使用以下代码：

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";

const useStyles = makeStyles({
    paper: {
      width: "100%",
      height: "100%",
      backgroundColor: 'grey'
    },
    card: {
      backgroundColor: 'blue'
    }
  });

export default function SimplePaper() {
  const classes = useStyles();

  return (
    <div>
      <Paper className={classes.paper}>
        <Card className={classes.card}>
          <CardContent>Hello World</CardContent>
        </Card>
      </Paper>
    </div>
  );
}

在这里检查一下。 我发现了一个关于这个问题的问题，但排名最高的答案并不能解决这个问题。

---

对于这个问题有什么建议或解决方案吗？

在CSS中，100%只是指父元素的100%。在本例中，它是环绕纸张组件的div。事实上，您看到的滚动条表明div不是视图的完整高度。尝试将100vh添加到div中，并将100%添加到纸张中

您可以通过直接调整

div

样式来尝试，如下所示

---

我已在中修改了您的示例代码

大多数浏览器默认

包含边距，因此，添加

可以重置样式（还添加了默认材质UI样式）

在最上面加上衬垫和100vh的高度

可以使窗户之间的间距达到最大高度

---

希望这能有所帮助~

默认情况下，

body

html标记有一个边距，因此在子元素上设置

100vh

将导致它占用比可用空间更多的空间，即100vh+（顶部和底部边距）。如果将

display:flex

添加到

body

类中，您还可以实现全高

纸张，然后在第一个子元素上使用
height:100%
，我相信你的意思是像@Onikur那样更新代码吗。谢谢你的时间和解释。
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";

const useStyles = makeStyles({
    paper: {
      width: "100%",
      minHeight: "100vh",
      backgroundColor: 'grey'
    },
    card: {
      backgroundColor: 'blue'
    }
  });

export default function SimplePaper() {
  const classes = useStyles();

  return (
    <div>
      <Paper className={classes.paper}>
        <Card className={classes.card}>
          <CardContent>Hello World</CardContent>
        </Card>
      </Paper>
    </div>
  );
}