CSS Grid 容器高度覆盖其他内容答案

【问题标题】：CSS Grid Container Height Covers Other ContentCSS Grid 容器高度覆盖其他内容
【发布时间】：2020-06-29 05:07:14
【问题描述】：

我正在构建一个响应式 CSS 网格，其中包含大小与所需纵横比匹配的项目。我已经尝试了其他一些技术中的填充黑客，但没有什么比使用 JS 来确定所需列数和间隙大小的1fr 的像素值，然后将其应用于使用repeat(auto-fill, minmax(${width}px, 0)) 调整行大小。

不幸的是，这种方法带来了一个相当讨厌的副作用：父 div (display: grid) 不知道其自身内容的高度，因此它的大小永远不会正确。结果，它永远不能显示超过一行的网格。其余的网格项显示为第一行下方的一条线。

为了解决这个问题，我尝试将父级的高度设置为 100%，但这涵盖了页面上的所有其他内容。我尝试过使用容器来调整大小，但也没有任何运气。我也试过overflow: auto，没有效果。如果我可以在我的脚本中计算并手动设置父 div 的高度，那可能会起作用，但我无法找到这样做的方法（而且似乎也是一种混乱的方法）。

有没有（好的）方法可以做到这一点？这是该问题的演示：https://codepen.io/jmindel/pen/GRoMjEw

【问题讨论】：

标签： javascript html css responsive css-grid

【解决方案1】：

当您设置overflow: auto 时，它将在您的元素中创建一个滚动条以显示指定区域中的所有内容。那么在这种情况下它不会帮助你。当您将元素的高度设置为 100% 时，它的高度将与它的父元素相同。我以前遇到过这个问题。如果要设置元素的高度，则应设置元素父级的所有父级的 height 属性。如果您希望代码具有响应性并且不想计算元素的确切高度，则可以使用 % 作为高度和宽度的单位，否则可以使用其他单位。尝试为所有父母设置 % 单位的高度。它帮助了我，我相信它也会帮助你。

【讨论】：

谢谢！可悲的是，这似乎并没有什么不同。因为.grid 有兄弟元素，所以这不起作用——它的父元素必须是完整的视口大小（100vw x 100vh），所以100% 在那里也没有什么不同。我尝试删除 .root 容器，但这只会删除任何可能被引用的父高度（因此即使使用 100% 高度，也只会显示第一行）。
@jmindel 如果您为 body 设置 height: 100%，为 .root 设置 100%，为 .grid 设置 50%，为 .card 设置 14%，它将对您有所帮助。我的意思是 body 是 root 的父级，你应该设置它的高度。 .root 是 .grid 的父级，.grid 是 .card 的父级。如果你这样做，卡片类的每个元素将只是整个网格元素的 14%，而你的网格将只是整个网页的 50%。您可以将此数字更改为您想要的数字，但我希望它会起作用
这似乎仍然没有达到预期的行为。对于这种特殊情况，必须使用特定的百分比值也太具体了——我希望构建一个完全响应的网格，它仍然保持给定的纵横比。不过再次感谢！

【解决方案2】：

这就是我最终要做的事情：

我尝试将 .grid 包装在另一个 div 中，并设置该包装器的样式，使其具有 overflow: scroll，从而修复不显示的高度（在这种环境中 100% 很好——它不覆盖任何东西，因为它是有限的到其块级父级的高度）。
我编写了一个脚本，临时将网格的高度设置为一个非常大的数字，找到网格中最低的元素，并使用它的位置来确定网格的高度，这给它一个强制的像素高度，直到下一次调整大小。

这种方法的一些缺点：

网格必须包含在一个可滚动的子容器中，这很适合我使用，但可能不适用于其他人。
网格的高度应该合适，但没有强制像素高度。 min-content 和 max-content 不起作用。

【讨论】：