使用显示时没有底部填充：网格和滚动

Question

我有一个容器 div，其中设置了一些填充、display: grid 和 overflow: auto。当 child div 的高度大于 parent 的高度并且出现滚动条时，它会滚动，这样就没有底边距了。

.container {
    background: red;
    display: grid;
    height: 300px;
    padding: 3em;
    overflow: auto;
    width: 300px;
}

.child {
    height: 500px;
    background: #000;
}

<div class="container">
    <div class="child"></div>
</div>

但是，如果容器不是 display: grid，向下滚动时底部填充就在那里。

这是 display: grid 元素的预期行为吗？如果是这样，为什么？什么是恢复底部填充的正确方法，最好只使用 CSS？

Answer 1

不确定这是预期结果还是错误，但解决方法是考虑一个额外的元素（使用伪元素）来恢复填充：

.container {
    background: red;
    display: grid;
    height: 300px;
    padding: 3em;
    overflow: auto;
    width: 300px;
}

.container:after {
  content:"";
  height:3em;
}

.child {
    height: 500px;
    background: #000;
}

<div class="container">
    <div class="child"></div>
</div>

Answer 2

@temani-afif 的出色回答让我走上了正确的道路。但是我发现当你有列时它不起作用 - 额外的 :after 元素可能会被推到网格行中的最后一个项目并且什么都不做，就像这样：

.container {
    background: red;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 1em;
    height: 300px;
    padding: 3em;
    overflow: auto;
    width: 300px;
}

.container:after {
  content:"";
  height:3em;
}

.child {
    height: 500px;
    background: #000;
}

<div class="container">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

我的解决方案的第一部分是将 :after 元素标记为 grid-column: span 2;（根据您的布局需要进行调整）...但是它给了我太多的底部填充，因为我们查看网格间隙设置加上添加的项目的高度。最终解决方案是将 psudo 元素的高度设置为 padding 值减去 grid-gap 值：

.container {
    background: red;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 1em;
    height: 300px;
    /* remove the bottom padding so it looks normal if your
       overflow: auto does not end up overflowing/scrolling */
    padding: 3em 3em 0;
    overflow: auto;
    width: 300px;
}

.container:after {
    grid-column: span 2;
    height: 2em; /* 3em (desired padding effect) minus 1em (grid-gap setting) */
    content: "";
}

.child {
    height: 500px;
    background: #000;
}

<div class="container">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

但请注意 - 如果您的网格间隙和容器填充相同 - 尝试类似 height: 0.01em 而不是 0，这似乎不起作用。

使用显示时没有底部填充：网格和滚动

No bottom padding when using display: grid and scroll

css

scroll

padding

css-grid