Issue
I use Paper component which contains a Card component and I want its height fit the full page screen. I tried to reproduce the problem and make it simple, so using this 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 case the Paper height equals to card height and it does not fit the full screen, you can check the code here.
When I use min-height: 100vh the Paper height fits the full screen but it adds 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>
);
}
Check the example here. I found a question talking about this issue described on this link but the most ranked answer does not fix the problem.
Any suggestions or solutions please for that issue?
Solution
I have modified your example code in here.
Most browsers are default <body> contains margin, therefore, add <CssBaseline /> could reset the styling (And also added default Material UI styling).
And add paddings and height 100vh on the most top <div> could make this full height with spacing between the window.
Hope this could help~
Answered By - Onikur
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.