Материал Ui Компонент Paper не соответствует высоте родительского компонента - PullRequest
Новая
       16

Материал Ui Компонент Paper не соответствует высоте родительского компонента

0 голосов
/ 29 февраля 2020

Я использую Paper компонент, который содержит Card компонент, и я хочу, чтобы его высота соответствовала экрану всей страницы. Я попытался воспроизвести проблему и сделать ее проще, поэтому, используя этот код: 

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

В этом случае высота бумаги равна высоте карты и она не помещается на весь экран, вы можете проверить код здесь .

Когда я использую 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>
  );
}

Проверьте пример Вот. Я нашел вопрос, говорящий об этой проблеме, описанный в этой ссылке , но самый ранжированный ответ не решает проблему. Любые предложения или решения, пожалуйста, по этому вопросу?

Ответы [ 2 ]

1 голос
/ 29 февраля 2020

Я изменил ваш пример кода в здесь .

Большинство браузеров по умолчанию <body> содержит поля, поэтому добавление <CssBaseline /> может сбросить стиль (а также добавлен материал по умолчанию) Стилизация пользовательского интерфейса).

И добавление отступов и высотой 100vh на самый верх <div> может сделать эту полную высоту с интервалом между окнами.

Надеюсь, это может помочь ~

1 голос
/ 29 февраля 2020

В CSS 100% просто относится к 100% родительского элемента. В этом случае это div-обертка вокруг вашего компонента Paper. Тот факт, что вы видите полосы прокрутки, говорит о том, что div не является полной высотой представления. Попробуйте добавить 100vh к div и 100% к бумаге.

Вы можете попробовать его, настроив стиль div напрямую, как показано ниже

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...