Material UI Paper 组件不适合父组件高度答案

【问题标题】：Material UI Paper component does not fit the parent component heightMaterial UI Paper 组件不适合父组件高度
【发布时间】：2023-03-15 22:02:01
【问题描述】：

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

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>
  );
}

此时Paper高度等于卡片高度，不适合全屏，可以查看代码here。

当我使用min-height: 100vh 时，纸张高度适合全屏，但会添加一个滚动条。

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>
  );
}

在此处查看example。我在link 上发现了一个关于此问题的问题，但排名最高的答案并不能解决问题。

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

【问题讨论】：

body html 标签默认有边距，因此在子元素上设置 100vh 将导致它占用比可用空间更多的空间，即 100vh +（顶部和底部边距）
如果您将display: flex 添加到body 类，然后在第一个子元素上使用height: 100%，我相信您也可以实现全高Paper

标签： javascript css reactjs material-ui

【解决方案1】：

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

大多数浏览器默认<body>包含边距，因此，添加<CssBaseline />可以重置样式（并且还添加了默认的Material UI样式）。

并在最顶部添加填充和高度 100vh <div> 可以使这个全高与窗口之间的间距。

希望对你有帮助~

【讨论】：

【解决方案2】：

在 CSS 中，100% 只是指 100% 的父元素。在这种情况下，它是包裹在 Paper 组件周围的 div。您看到滚动条的事实表明 div 不是视图的完整高度。尝试将 100vh 添加到 div 并将 100% 添加到 Paper。

你可以直接调整div样式试试看，如下

【讨论】：

你的意思是更新this这样的代码吗？
我认为您的意思是@Onikur 所做的。感谢您的时间和解释。