Html 固定大小滚动的CSS网格：如何解决未显示底部边距/填充的问题？

编辑：

所以我看到了指向的重复链接，在我看来，这个问题是为了解决给定固定大小、固定宽度或固定高度的问题

最初问题的解决方案更多的是关于使用黑客方法修复容器。我决定用一种不同的方法来解决它，同时解决我在这个问题中提出的问题

在CSS中，使用display:grid和fixed height时，如果启用overflow:auto，您可能会得到这种布局，如下所示：

.卷轴{ 溢出：自动； 背景色：bbddee； } .集装箱{ 填充：10px； 显示：网格； 网格模板列：1fr； 网格行间距：10px； 高度：420px； } .itemContainer{ 边框：1px实心EF； 填充：10px 20px； 背景色：fff； } .项目名称{ 文本对齐：居中； 保证金：0自动； } .itemLink{ 文本对齐：居中； 保证金：0自动； } 客房基本用品及套餐七五折；箱子 得到报价 客房基本用品及套餐七五折；箱子 得到报价 客房基本用品及套餐七五折；箱子 得到报价 客房基本用品及套餐七五折；箱子 得到报价 客房基本用品及套餐七五折；箱子 得到报价 客房基本用品及套餐七五折；箱子 得到报价 客房基本用品及套餐七五折；箱子 得到报价 客房基本用品及套餐七五折；箱子 得到报价 客房基本用品及套餐七五折；箱子 得到报价 客房基本用品及套餐七五折；箱子 得到报价 客房基本用品及套餐七五折；箱子 得到报价 客房基本用品及套餐七五折；箱子 得到报价 客房基本用品及套餐七五折；箱子 得到报价

---

下面是一个解决方案，可能是众多解决方案中的一个，该解决方案展示了如何通过display:grid修复固定高度div中缺少底部填充/边距的问题：

.集装箱{ 填充：10px； 显示：网格； 网格行间距：10px； 网格模板列：1fr； 宽度：100%； } .itemContainer{ 边框：1px实心EF； 背景色：fff； 最大高度：100%； 填充：10px 20px； 身高：100%； } .项目名称{ 文本对齐：居中； 保证金：0自动； 线高：20px； } .itemLink{ 文本对齐：居中； 保证金：0自动； 线高：20px； } 客房基本用品及套餐七五折；箱子 得到报价 客房基本用品及套餐七五折；箱子 得到报价 客房基本用品及套餐七五折；箱子 得到报价 客房基本用品及套餐七五折；箱子 得到报价 客房基本用品及套餐七五折；箱子 得到报价 客房基本用品及套餐七五折；箱子 得到报价 客房基本用品及套餐七五折；箱子 得到报价 客房基本用品及套餐七五折；箱子 得到报价 客房基本用品及套餐七五折；箱子 得到报价 客房基本用品及套餐七五折；箱子 得到报价 客房基本用品及套餐七五折；箱子 得到报价 客房基本用品及套餐七五折；箱子 得到报价 客房基本用品及套餐七五折；箱子 得到报价

---

这是我在使用CSS网格时的修复：

/* Fix scrollbar removing padding-bottom */
@supports (-moz-appearance:none) {
  .container::after {
    content: "";
    height: 1px;
    margin: calc(var(--padding) - var(--gap));
  }
}

---

如果我错了，请告诉我需要修正什么，这样我可以从你的批评中吸取教训。谢谢。很抱歉，但这与CSS网格完全无关，这只是一个填充溢出问题，我们可以轻松调整。有一大堆问题要处理this@TemaniAfif我懂了。如果它是一个带有填充的溢出问题，那么正确的方法是什么来调整它，从而修复原始问题？谢谢。@TemaniAfif啊，这是我以前不知道的。谢谢分享。@TemaniAfif CSS网格确实发挥了作用，因为我的修复程序必须为CSS网格/通量间隙做额外的工作。否则，新的填充就是间隙的大小。如果间隔和填充相同，则很容易忽略。@Michael_B这似乎是一个可能的重复，但我的回答主要集中在使用元素的大小拉伸容器的边界。也许这只是其中的一个？@Michael_B我确实在代码片段下面提供了一个解释。这可以接受吗？相关：重复的问题适用于相同的初始问题和不同的答案。。。所以，如果我们认为这个问题对所有人都有利，那么你的问题就和另一个问题一样。