Material UI Paper component does not fit the parent component height

Question

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?

The `body` html tag has a margin by default therefore setting `100vh` on a child element will result in it taking up more space than available i.e. 100vh + (top & bottom margins) — curiousdev, Feb 29 '20 at 16:42
You can also achieve full height `Paper` if you add `display: flex` to `body` class, then using `height: 100%` on first child element, I believe — curiousdev, Feb 29 '20 at 16:44

score 6 · Accepted Answer · answered Feb 29 '20 at 16:34

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~

score 1 · Answer 2 · edited Feb 29 '20 at 19:07

1

In CSS, 100% simply refers to 100% of the parent element. In this case it is the div wrapping around your Paper component. The fact your seeing scroll bars says that div isn’t the full height of the view. Try adding the 100vh to the div and 100% to the Paper.

You can try it out by adjusting the div style directly, as below

edited Feb 29 '20 at 19:07

keikai

14,085
9
49
68

answered Feb 29 '20 at 16:19

Heath

1,021
3
12
19

Do you mean to update the code like [this](https://codesandbox.io/s/material-demo-tjf4w)? – Slim Feb 29 '20 at 16:51
I think you mean what @Onikur did. Thanks for your time and your explanation. – Slim Feb 29 '20 at 17:08

Material UI Paper component does not fit the parent component height

2 Answers2