如何使 CSS 网格容器始终填充可用的垂直空间答案

【问题标题】：How to make CSS Grid Container Always Fill Available Vertical Space如何使 CSS 网格容器始终填充可用的垂直空间
【发布时间】：2020-03-06 16:19:42
【问题描述】：

我有一个我遇到的问题的简化版本。我有一个可以放入物品的容器。容器设置为display: grid 并且我希望它始终填充所有可用的垂直空间，无论里面有什么。

为了说明，我在这里有一个简单的 CodeSandbox。我的问题是：

尽管设置了height: 100%，为什么容器（灰色）没有填满所有可用空间？（我在这里也试过height: 100vh，但它最终也拉伸了里面的元素）
当我从容器中取出某些东西时（即点击“取出卡片”按钮），它为什么会缩小？

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

2020 年 3 月 9 日更新 - 解决方案 - https://codesandbox.io/s/minimumheightgrid-nh2oq

【问题讨论】：

我的第一个问题是“100% 的什么”？
100% 必须向上参考父母来确定。如果优越的高度是不可量化的，你的财产将失败。 - stackoverflow.com/questions/1575141/…
父 div 的 100%。所以你的意思是父 div 也需要 100% ？
是的，您需要确保 100% 可以量化。如果容器是最终父级，那么 html 和 body 也需要具有 100% 的高度/最小高度。
已经分叉了我的笔并确保父级（带有红色边框）大于我的容器。还是同样的问题 - codesandbox.io/s/minimumheightgrid-rjvzg

标签： javascript html css reactjs css-grid

【解决方案1】：

如果要确保蓝色方块在网格中单独渲染时填满所有空间。你只需要给你的蓝色方块设置 100% 的宽度，然后让网格 css 来处理其余的事情。

这里是分叉沙箱的链接https://codesandbox.io/s/minimumheightgrid-i494m

注意：如果我误解了您的问题，请随时告诉我。

【讨论】：

我希望灰色容器（包含蓝色方块）始终填满页面上所有可用的垂直空间（不管里面有什么）
它已经占用了他父容器的所有可用空间，如果你想让灰色部分占用更多空间，你需要给他的父容器更大的高度。灰色部分应该有多大的屏幕或其他设置的高度？
我在这里为我的分叉 CodeSandbox 中的父容器提供了更大的高度 - codesandbox.io/s/minimumheightgrid-rjvzg。还是同样的问题。
是的，抱歉，我忘记了我的代码框中有 grid-template-rows css 属性。是你要找的吗？ codesandbox.io/s/minimumheightgrid-3irxw
不，很遗憾没有。我自己也有类似的东西。我希望蓝色框保持相同的恒定大小（即 200px * 200px），并且只有它是容器（灰色框）来填充可用空间。

【解决方案2】：

终于找到解决办法了-https://codesandbox.io/s/minimumheightgrid-nh2oq

在容器上更改以下内容（灰色）

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

在元素上（蓝色）

maxHeight: "200px"

【讨论】：