Javascript CSS网格容器高度覆盖其他内容

我正在构建一个响应性CSS网格，其中的项目大小与所需的纵横比匹配。在其他一些技术中，我尝试过填充技术，但没有什么比使用JS确定所需列数和间距大小的

1fr

像素值，然后使用

repeat（自动填充，minmax（${width}px，0））

将其应用于行大小调整更有效

不幸的是，这种方法带来了一个相当糟糕的副作用：父div（

display:grid

）不知道其自身内容的高度，因此其大小永远不会正确。因此，它永远无法显示多行网格。其余的网格项显示为第一行正下方的一行

为了解决这个问题，我尝试将父对象的高度设置为100%，但这涵盖了页面上的所有其他内容。我试过用容器来调整尺寸，但也没有运气。我还尝试了

溢出：auto

，但没有效果。如果我可以在脚本中计算并手动设置父div的高度，这可能会起作用，但我还没有找到这样做的方法（而且似乎是一种混乱的方法）

---

有什么好办法吗？下面是该问题的演示：

当您设置

溢出：自动时，它将在元素中生成一个滚动条，以显示指定区域中的所有内容。那么在这种情况下，它对你没有帮助。将元素的高度设置为100%时，其高度将与其父元素的高度相同。我以前有过这个问题。如果要设置元素的高度，应设置元素父元素的所有父元素的高度属性。如果希望代码具有响应性并且不想计算元素的确切高度，则可以使用%作为高度和宽度的单位，如果不希望，则可以使用其他单位。尝试为所有家长设置%unit高度。它帮助了我，我相信它也会帮助你。
当你设置
溢出：自动时，它会在你的元素中创建一个滚动条，以显示指定区域中的所有内容。那么在这种情况下，它对你没有帮助。将元素的高度设置为100%时，其高度将与其父元素的高度相同。我以前有过这个问题。如果要设置元素的高度，应设置元素父元素的所有父元素的高度属性。如果希望代码具有响应性并且不想计算元素的确切高度，则可以使用%作为高度和宽度的单位，如果不希望，则可以使用其他单位。尝试为所有家长设置%unit高度。它帮助了我，我相信它也会帮助你。
以下是我最后要做的：


我尝试在另一个div中包装
.grid
，并对包装进行样式设置，使其具有
溢出：滚动
，从而修复未显示的高度（在这种环境中100%是可以的——它不覆盖任何内容，因为它仅限于其块级父级的高度）
我编写了一个脚本，临时将网格的高度设置为一个非常大的数字，查找网格中最低的元素，并使用其位置确定网格的高度，从而在下次调整大小之前为其提供强制像素高度

这种方法有几个缺点：


网格必须包含在可滚动的子容器中，该子容器适合我使用，但可能不适合其他人
网格的高度应该大小合适，但在没有强制像素高度的情况下不能<代码>最小内容
和
最大内容
不起作用
以下是我最后要做的：


我尝试在另一个div中包装
.grid
，并对包装进行样式设置，使其具有
溢出：滚动
，从而修复未显示的高度（在这种环境中100%是可以的——它不覆盖任何内容，因为它仅限于其块级父级的高度）
我编写了一个脚本，临时将网格的高度设置为一个非常大的数字，查找网格中最低的元素，并使用其位置确定网格的高度，从而在下次调整大小之前为其提供强制像素高度

这种方法有几个缺点：


网格必须包含在可滚动的子容器中，该子容器适合我使用，但可能不适合其他人
网格的高度应该大小合适，但在没有强制像素高度的情况下不能<代码>最小内容

和

最大内容

不起作用

---

谢谢！然而，不幸的是，这似乎并没有带来什么不同。因为

.grid

有同级元素，所以这不起作用——它的父元素必须是完整的视口大小（

100vw

x

100vh

），所以

100%

在这方面也没有什么区别。我尝试删除

.root

容器，但这只会删除任何可能被引用的父级高度（因此即使使用

100%

高度，也只显示第一行）。@jmindel如果您设置

高度：100%

用于主体，100%用于.root，50%用于.grid，14%用于.card，它将对您有所帮助。我的意思是身体是根的父母，你应该设置它的高度。并且.root是.grid的父级，.grid是.card的父级。如果你这样做的话，卡片类的每个元素将只占你整个网格元素的14%，而你的网格将只占整个网页的50%。您可以将此数字更改为您想要的数字，但我希望它会起作用。这似乎仍然无法实现所需的行为。对于这种特殊情况，必须使用特定的百分比值也太特殊了——我希望构建一个完全响应的网格，它仍然保持给定的纵横比。不过，再次感谢你！非常感谢。然而，不幸的是，这似乎并没有带来什么不同。因为

.grid

有同级元素，所以这不起作用——它的父元素必须是完整的视口大小(<