css - No bottom padding when using display: grid and scroll
问题描述
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.
Here is a 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>
However, if the container is made any other than display: grid
, the bottom padding is there when scrolled down.
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>
推荐阅读
- spring-boot - 我想使用@Scheduler 注释在rabbitMQ 中以5 秒的延迟发送消息
- javascript - 在节点 js 应用程序中使用 jquery 或 javascript 在表格的单元格内创建 Svg 行
- javascript - 无法用玩笑和酶模拟点击菜单 Antd
- javascript - 在 VueJS 中定义一个引用变量
- python - 在 Scapy 数据包中包含命令的输出
- powerbi - 我在 Power Bi Report Builder 中找不到登录选项
- excel - 关于使用 VBA 在 Excel 上禁用按钮
- python - Python yield 语句每次都返回相同的值
- node.js - 尝试异步调用 AWS lambda。什么都没发生
- node.js - 通过 dropbox-v2-api nodejs 将大文件上传到 Dropbox