CSS 网格容器高度覆盖其他内容
CSS Grid Container Height Covers Other Content
我正在构建一个响应式 CSS 网格，其中包含大小与所需纵横比相匹配的项目。我在其他一些技术中尝试了填充技巧，但对我来说，没有什么比使用 JS 确定所需列数和间隙大小的 1fr 像素值，然后应用使用 repeat(auto-fill, minmax(${width}px, 0)).
调整行大小
不幸的是，这种方法带来了一个相当糟糕的副作用：父级 div (display: grid) 不知道其自身内容的高度，因此它永远无法正确调整大小。因此，它永远无法显示超过一行的网格。其余网格项目显示为第一行正下方的一行。
为了解决这个问题，我尝试将父级的高度设置为 100%，但这会覆盖页面上的所有其他内容。我试过使用容器来修复尺寸，但也没有任何运气。我也试过 overflow: auto，但没有效果。如果我可以在我的脚本中计算并手动设置父 div 的高度，那可能会起作用，但我一直无法找到这样做的方法（而且似乎也是一种混乱的方法）。
有什么（好的）方法可以做到这一点吗？这是问题的演示：https://codepen.io/jmindel/pen/GRoMjEw
当您设置 overflow: auto 时，它会在您的元素中制作一个滚动条以显示指定区域中的所有内容。那么在这种情况下它不会帮助你。当您将元素的高度设置为 100% 时，它的高度将与它的 parent 元素相同。我以前遇到过这个问题。如果你想设置一个元素的高度，你应该设置元素的 parents 的所有 parents 的高度属性。如果您希望您的代码具有响应性并且不想计算元素的确切高度，则可以使用 % 作为高度和宽度的单位，否则您可以使用其他单位。尝试为所有 parent 设置 % 单位的高度。它对我有帮助，我相信它也会对你有帮助。
这是我最后做的事情：
- 我尝试将
.grid 包装在另一个 div 中并设置包装器的样式使其具有 overflow: scroll，这修复了不显示的高度（在此环境中 100% 就可以了——它不包含任何内容，因为它仅限于其块级父项的高度）。
- 我编写了一个脚本，临时将网格的高度设置为一个非常大的数字，找到网格中最低的元素，并使用它的位置来确定网格的高度，这会在下一次调整大小之前给它一个强制像素高度.
这种方法的一些缺点：
- 网格必须包含在一个可滚动的子容器中，它适合我使用，但可能不适用于其他人。
- 网格的高度应该大小合适，但没有强制像素高度。
min-content 和 max-content 无效。
我正在构建一个响应式 CSS 网格，其中包含大小与所需纵横比相匹配的项目。我在其他一些技术中尝试了填充技巧，但对我来说，没有什么比使用 JS 确定所需列数和间隙大小的 1fr 像素值，然后应用使用 repeat(auto-fill, minmax(${width}px, 0)).
不幸的是，这种方法带来了一个相当糟糕的副作用：父级 div (display: grid) 不知道其自身内容的高度，因此它永远无法正确调整大小。因此，它永远无法显示超过一行的网格。其余网格项目显示为第一行正下方的一行。
为了解决这个问题，我尝试将父级的高度设置为 100%，但这会覆盖页面上的所有其他内容。我试过使用容器来修复尺寸，但也没有任何运气。我也试过 overflow: auto，但没有效果。如果我可以在我的脚本中计算并手动设置父 div 的高度，那可能会起作用，但我一直无法找到这样做的方法（而且似乎也是一种混乱的方法）。
有什么（好的）方法可以做到这一点吗？这是问题的演示：https://codepen.io/jmindel/pen/GRoMjEw
当您设置 overflow: auto 时，它会在您的元素中制作一个滚动条以显示指定区域中的所有内容。那么在这种情况下它不会帮助你。当您将元素的高度设置为 100% 时，它的高度将与它的 parent 元素相同。我以前遇到过这个问题。如果你想设置一个元素的高度，你应该设置元素的 parents 的所有 parents 的高度属性。如果您希望您的代码具有响应性并且不想计算元素的确切高度，则可以使用 % 作为高度和宽度的单位，否则您可以使用其他单位。尝试为所有 parent 设置 % 单位的高度。它对我有帮助，我相信它也会对你有帮助。
这是我最后做的事情：
- 我尝试将
.grid包装在另一个 div 中并设置包装器的样式使其具有overflow: scroll，这修复了不显示的高度（在此环境中 100% 就可以了——它不包含任何内容，因为它仅限于其块级父项的高度）。 - 我编写了一个脚本，临时将网格的高度设置为一个非常大的数字，找到网格中最低的元素，并使用它的位置来确定网格的高度，这会在下一次调整大小之前给它一个强制像素高度.
这种方法的一些缺点：
- 网格必须包含在一个可滚动的子容器中，它适合我使用，但可能不适用于其他人。
- 网格的高度应该大小合适，但没有强制像素高度。
min-content和max-content无效。