Css 当具有外部高度的网格项溢出时，为什么溢出滚动端口填充不应用于网格容器

发布于12月08日

示例HTML和CSS:

.root {
  background-color: green;
}

.outer {
    display: grid;
    grid-template-rows: 100vh;
    grid-template-columns: 100px;
    padding: 5rem;
    overflow-y: auto;
}

.nav {
  background-color: red;
  height: 150vh;
}
 
* {
  box-sizing: border-box;
}

<div class="root">
  <div class="outer">
    <div class="nav"></div>
  </div>
</div>

小提琴示例:https://jsfiddle.net/dr18cbet/

在这个精心设计的示例中，滚动到网格容器的底部不包括网格容器的底部填充.

当然还有更好的方法来组织这些代码，例如，将填充和溢出设置移动到网格项(在本例中为nav).我还注意到，如果我将grid-template-rows设置为默认值auto，填充也会按预期显示.但是，在网格容器上的这种溢出+填充设置的组合以及获得外部高度(在示例中为100vh)的网格项会导致不应用容器的底部填充.为什么会这样？我翻遍了css的说明书，但找不到解释.

.box { border: 2px solid; height: 200px; aspect-ratio: 1; padding: 20px; box-sizing: border-box; overflow: auto; } .box > div { height: 100%; } .box > div > div { height: 220px; background: blue; }

Css 当具有外部高度的网格项溢出时，为什么溢出滚动端口填充不应用于网格容器

推荐答案

Css相关问答推荐

在Powershell中使用正则表达式编辑css文件

如何将CSS Paint API与Reaction一起使用

Mat-Form-字段占用更多区域，导致其他控件远离它

如何使重复线性渐变适合字体大小？

如何使用TailwindCSS溢出？

当滚动量较小时，在滚动问题上动画粘性导航

为什么我的 CSS 转换在 React 18 中不起作用

通过 CSS 中的媒体查询更改站点的页面大小

Material UI Modal 因背景而变暗

使用 css 网格和 nth-child 交替行

基于类的 CSS Select 器

在同一旋转中以度数变换旋转

元素上的子弹来自哪里？

如何从表格单元格中创建链接

BEM 块、命名和嵌套

我应该使用 CSS ：disabled 伪类还是 [disabled] 属性 Select 器，还是见仁见智？

使用 Twitter Bootstrap 使页脚粘在页面底部

CSS 表格 td 宽度 - 固定，不灵活

将 Fixed div 设置为父容器的 100% 宽度

CSS关键帧动画CPU占用率高，应该这样吗？