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

Question

我有一个容器

div

，里面有一些填充物、

display: grid

和

overflow: auto

集。当子级

div

的高度大于父级的高度并且出现滚动条时，它会滚动，以便没有底部填充。

这是一个Fiddler。

.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，这似乎不起作用。

Answer 3

我无法再用您的代码片段重现问题，但是当我的网格布局出现问题时，解决方案（或解决方法？）是设置

grid-auto-rows: min-content;

在容器上（或为网格元素提供

min-content

行高的其他方式，例如通过

grid-template-rows

）。