I am currently working with the Paper component that contains a Card component, and I am trying to make its height fill the entire screen. To simplify the problem, I have provided the following code:
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>
);
}
In this instance, the height of the Paper matches the height of the card and does not fill the entire screen. You can view the code here.
When I use min-height: 100vh, the Paper height fills the entire screen but it introduces a scroll bar.
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>
);
}
You can see an example by clicking on the link here. I came across a question discussing this issue on this website, but the top-ranked answer did not solve the problem.
If you have any suggestions or solutions for this issue, please share them.