使用显示器时无底部填充:网格和滚动 [英] No bottom padding when using display: grid and scroll

问题描述

我有一个容器div，其中设置了一些填充，display: grid和overflow: auto.当孩子div的身高大于父母的身高时，出现滚动条，它将滚动，因此没有底部填充.

I have a container div which has some padding, display: grid and overflow: auto set. When a child div's height is bigger than the parent's one and a scroll bar appears, it scrolls so that there is no bottom padding.

这是提琴手.

.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之外的任何其他容器，则向下滚动时将在底部填充.

However, if the container is made any other than display: grid, the bottom padding is there when scrolled down.

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

Is this an expected behavior of display: grid element? If so, why? What is a proper way of recovering the bottom padding, preferably, with CSS only?

推荐答案

不确定是预期的结果还是错误，但是一种解决方法是考虑使用额外的元素(使用伪元素)来恢复填充:

Not sure if it's the intended result or a bug but a workaround is to consider an extra element (using pseudo element) to recover the padding:

.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>

这篇关于使用显示器时无底部填充:网格和滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！