问题描述
我有一个简单的网格布局,高度和滚动次数有限.
I have a simple grid layout, that has a limited height and scrolls.
.outer {
border: 1px solid red;
display: grid;
grid-auto-flow: row;
padding: 30px;
grid-gap: 30px;
max-height: 150px;
overflow-y: scroll;
}
.inner {
background-color: gray;
height: 100px;
width: 100px;
}
<div class="outer">
<div class="inner">
one
</div>
<div class="inner">
two
</div>
</div>
填充被应用在网格的顶部,左侧和右侧:
The padding is being applied at the top, left and right of the grid:
但是当我向下滚动时,底部的填充未应用:
But when I scroll down, the padding on the bottom isn't applied:
如果我删除了 max-height
,则现在将应用底部的填充:
If I remove the max-height
the padding at the bottom is now applied:
为什么不使用底部填充?如何确保填充在有限高度的网格项目上有效?
推荐答案
关于溢出和填充的说明是 CSS规范中的当前问题,并且行为可能因情况而异.
Clarity around overflow and padding is a current issue in the CSS spec and the behavior may differ based on each case.
在澄清规范或浏览器改变其行为之前,针对您的用例的一种解决方法是在末尾添加一个空元素(因为您的填充等于空白).
Until the spec is clarified or browsers change their behavior, a workaround for your use case is to add an empty element at the end (since your padding is equal to the gap).
.outer {
border: 1px solid red;
display: grid;
grid-auto-flow: row;
padding: 30px;
grid-gap: 30px;
max-height: 150px;
overflow-y: scroll;
}
.inner {
background-color: gray;
height: 100px;
width: 100px;
}
.outer::after {
content:"";
height:0.1px;
}
<div class="outer">
<div class="inner">
one
</div>
<div class="inner">
two
</div>
</div>
这篇关于如何确保填充在有限高度的网格项目上有效?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!