Material UI Paper component does not fit the parent component height

javascript css reactjs material-ui

17,525

Solution 1

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~

Solution 2

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

17,525

Author by

Slim

I'm a passionate fullstack javascript engineer, and I'm always looking for new things to learn.

Updated on July 14, 2022

Comments

Slim almost 2 years

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?

curiousdev over 4 years

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 over 4 years

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

Slim over 4 years

Do you mean to update the code like this?
Slim over 4 years

I think you mean what @Onikur did. Thanks for your time and your explanation.