代码之家 › 专栏 › 技术社区 › Alexander Abakumov

使用display:grid和scroll时没有底部填充

css-grid padding scroll css

Alexander Abakumov · 技术社区 · 5 年前

我有一个集装箱 div display: grid 和 overflow: auto 准备好了。当一个孩子 分区

这是一个 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>

但是,如果容器是由 显示:网格

显示:网格

0 回复 | 直到 5 年前

Temani Afif 5 年前

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

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

推荐文章

osteopathx · 使用jquery通过HTML按钮水平滚动全景图像

7 年前

Zay · 2个div,具有响应滚动的固定图像

7 年前

miss.emenems · 仅当元素到达窗口顶部时调用函数一次

7 年前

Tobias von Falkenhayn · 如何为无休止的滚动回收视图绘制背景

7 年前

dungey_140 · jQuery根据滚动位置添加类

7 年前

Marco · 滚动时在视口中显示元素

7 年前

CoÅkun Cengiz · 在listview中显示或隐藏对象

7 年前

Albeld · Autoscroll网站始终保持相同的速度

7 年前

peace_love · 如何使表格滚动到某个位置?

7 年前

joedoesnotknow · 添加新元素时如何滚动到div底部

7 年前