滚动容器底部 padding 不可见，是因为其未被纳入可滚动区域；需设置固定高度、使用 scroll-padding-bottom、占位元素或 margin-bottom 替代，尤其在 flex 子项、uni-app scroll-view 和 ios safari 中需特殊处理。
滚动容器底部 padding 看不见，是因为它不在可滚动范围内
直接给 overflow-y: auto 的容器加 padding-bottom，滚动到底部时内容被截断——不是 padding 没生效，而是浏览器根本没把它算进“能滚到的地方”。可滚动区域（scrolling viewport）默认只覆盖内容高度，padding-bottom 被压在可视区下方，用户拉到底也看不到。
- 容器必须有明确的
height或max-height，否则 padding 没作用对象 - 内容区要主动“顶高”：在末尾插入一个占位元素，比如
<div style="height: 24px"></div> - 更干净的做法是配合
scroll-padding-bottom: 24px，告诉浏览器“滚动锚点停在这之上”，避免内容贴底 - 别指望
padding-bottom做功能留白（比如按钮悬浮区），它只是视觉缓冲；真正需要交互空间，该用margin-bottom或独立容器
flex 子项里的 padding-bottom 经常失效
当滚动容器是 display: flex 的子项（尤其 flex-direction: column），padding-bottom 极易被忽略。原因在于 flex 项默认不拉伸，也不把 padding 当作内容高度的一部分。
- 加
align-self: stretch并确保父容器有明确高度约束，有时能起效 - 但更可靠的是：把空隙移到内容末尾元素上，用
margin-bottom替代容器padding-bottom - 如果同时用了
flex: 1，padding-bottom很可能被压缩，此时优先用占位元素或gap（仅现代 flex 支持）
移动端 Safari 中 padding-bottom 一闪就消失
iOS Safari 的弹性滚动会让内容短暂滑出视口，导致 padding-bottom 区域在快速滚动后“闪一下”就没了。用户根本注意不到那块留白。
- 必须加
overscroll-behavior: contain阻止弹性滚动穿透 - 推荐双保险：
padding-bottom: 24px+scroll-padding-bottom: 24px -
scroll-padding-bottom是关键：它影响滚动锚点行为，而不仅仅是视觉渲染
uni-app 的 <scroll-view></scroll-view> 里 margin-bottom 不生效
在 uni-app 中，<scroll-view></scroll-view> 是个特殊滚动容器，它的内部布局逻辑不完全遵循标准 CSS。你给末尾提示元素加 margin-bottom，它大概率不会撑开滚动高度，文字会紧贴底部。
- 别依赖
margin-bottom，改用padding-bottom加在<scroll-view></scroll-view>自身上（前提是设了固定高度） - 或者，在内容末尾加一个占位
<view style="height: 50rpx"></view> - 避免在
<scroll-view></scroll-view>内部用flex: 1+padding组合，容易触发尺寸计算冲突
padding 就只是画在边上，不是撑在里边。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
