Как сделать CSS Сетка Контейнером Всегда Заполняйте Доступное Вертикальное Пространство - PullRequest
Новая
       5

Как сделать CSS Сетка Контейнером Всегда Заполняйте Доступное Вертикальное Пространство

0 голосов
/ 06 марта 2020

У меня есть упрощенная версия проблемы, с которой я столкнулся. У меня есть контейнер, в который я кладу вещи. Контейнер настроен как display: grid и Я хочу, чтобы он всегда заполнял все доступное вертикальное пространство независимо от того, что в нем находится.

Для иллюстрации у меня есть простой CodeSandbox здесь. Мой вопрос:

  1. Почему контейнер (серым цветом) не заполняет все доступное пространство, несмотря на настройку height: 100%? (Я также попытался height: 100vh здесь, но это также привело к растяжению элементов внутри)
  2. Когда я удаляю что-то из контейнера (то есть нажмите кнопку «Удалить карту»), почему это уменьшается? 
import Paper from "@material-ui/core/Paper";
import Button from "@material-ui/core/Button";
import { makeStyles } from "@material-ui/styles";
import React, { useState } from "react";
const useStyles = makeStyles({
  cardContainerRootStyle: {
    gridTemplateColumns: "repeat(auto-fit, minmax(348px, 1fr))",
    justifyItems: "center",
    display: "grid",
    gridGap: "1rem",
    margin: "0 auto",
    padding: 15,
    height: "100%"
  }
});

export default function App() {
  const styles = useStyles();
  const [cardCurrentlyDisplayed, setCardCurrentlyDisplayed] = useState([
    <Paper
      style={{ minHeight: "200px", minWidth: "200px", backgroundColor: "blue" }}
    />
  ]);

  return (
    <>
      <Button variant="outlined" onClick={() => setCardCurrentlyDisplayed([])}>
        Remove Card
      </Button>
      <Paper
        style={{ backgroundColor: "grey" }}
        square={true}
        classes={{
          root: styles.cardContainerRootStyle
        }}
      >
        {cardCurrentlyDisplayed}
      </Paper>
    </>
  );
}

Edit minimumHeightGrid

Обновлено 9 марта 2020 г. - Решение - https://codesandbox.io/s/minimumheightgrid-nh2oq

Ответы [ 2 ]

0 голосов
/ 06 марта 2020

Наконец-то есть решение - https://codesandbox.io/s/minimumheightgrid-nh2oq

Измените следующее на контейнере (серый) 

    minHeight: "100vh",
    height: "auto"

и на элементе (синий) 

maxHeight: "200px"
0 голосов
/ 06 марта 2020

Если вы хотите убедиться, что синий квадрат заполняет все пространство, когда он отображается только в сетке. Вам просто нужно дать вашему синему квадрату ширину 100% и позволить сетке css позаботиться обо всем остальном.

Здесь ссылка на раздвоенную песочницу https://codesandbox.io/s/minimumheightgrid-i494m

NB: если я неправильно понял вашу проблему, не стесняйтесь, сообщите мне.

...