滚动容器底部padding不生效是因为可滚动区域不包含padding，需固定容器高度并用占位元素或scroll-padding-bottom确保留白可见。
滚动容器底部padding不生效的典型表现
直接给 overflow-y: auto 容器加 padding-bottom，滚动到底部时内容会被截断——不是留白，而是“看不见最后一段”。这是因为滚动区域（scrolling viewport）默认只覆盖内容区，padding-bottom 被压在可视区之外，浏览器不把它算进可滚动范围。
用padding-bottom预留空间的正确姿势
核心是让滚动容器的「可滚动高度」包含 padding 底部空间，而不是靠视觉留白。关键不在 padding 本身，而在如何让内容撑开它：
- 容器必须有明确的高度限制（如
height: 300px或max-height: 400px），否则padding-bottom没作用对象 - 内容区需主动“顶高”：在内容末尾插入一个占位元素，高度等于你想要的底部留空值，比如
<div style="height: 24px"></div> - 或者更干净的做法：用
padding-bottom+box-sizing: border-box，但前提是容器高度固定且内容不超出——此时 padding 会从高度中扣除，留出视觉空隙，但滚动条仍能拉到底部看到它
flex布局下padding-bottom失效的常见陷阱
当滚动容器是 display: flex 的子项（尤其 flex-direction: column）时，padding-bottom 极易被忽略。原因在于 flex 项默认不拉伸，也不把 padding 当作内容高度的一部分。
- 解决方案一：给容器加
align-self: stretch并确保父容器有高度约束 - 解决方案二：改用
margin-bottom在内容末尾元素上设空隙（更可靠，不依赖容器 box-sizing） - 注意：若同时用了
flex: 1，padding-bottom依然可能被压缩，此时应优先用占位元素或gap（仅支持现代 flex）
移动端 Safari 中 padding-bottom 被遮挡的特殊处理
iOS Safari 的滚动惯性会让内容短暂滑出视口，导致 padding-bottom 区域在快速滚动后“闪一下”就消失，用户根本看不到那块留白。
立即学习“前端免费学习笔记（深入）”；
- 必须配合
overscroll-behavior: contain阻止弹性滚动穿透 - 推荐用
padding-bottom+scroll-padding-bottom双保险：scroll-padding-bottom: 24px告诉浏览器“滚动锚点要停在这之上”，避免内容贴底 - 不要依赖
padding-bottom做功能分隔（比如按钮悬浮区），它只是视觉缓冲；真正需要交互留白的地方，应该用margin-bottom或独立容器
最常被忽略的是：padding-bottom 是否真的参与了滚动计算——它只在容器高度固定、内容可溢出的前提下才有效；一旦容器靠内容自适应高度，或者用了 flex/gird 的自动尺寸逻辑，padding 就只是“画在边上”，不是“撑在里边”。
