移动端 margin-bottom 不生效主因是外边距合并或父容器未撑开高度；推荐用 padding-bottom 替代，配合 env(safe-area-inset-bottom) 及 fallback，并确保 viewport-fit=cover 和父容器正确占满视口。
移动端 margin-bottom 不生效的常见原因
直接写 margin-bottom: 20px 在页面最底端元素上，经常没反应——不是你写错了，是父容器高度没撑开，或者触发了 BFC 边界折叠。尤其在 body 或 html 上设 margin-bottom，基本无效，因为根元素不参与常规流式外边距计算。
- 父容器用了
height: 100vh或min-height: 100vh，但子元素margin-bottom被“吞掉”了 - 最后一个子元素和父容器之间发生外边距合并（margin collapse），尤其当父容器没有 border/padding 且子元素是块级第一个/最后一个时
- 使用了
position: absolute或fixed的底部栏，把原本的文档流挤没了，留白位置失去参照
用 padding-bottom 替代 margin-bottom 更可靠
对父容器（比如 main 或 .page）加 padding-bottom，比给子元素设 margin-bottom 稳定得多。它不参与外边距合并，也不依赖子元素是否“在流中”，还能兼容 iOS Safari 滚动回弹时的视觉一致性。
- 如果底部要留 30px 给 tabBar 或安全区，就写
padding-bottom: env(safe-area-inset-bottom, 30px) - 配合
box-sizing: border-box（默认就有），不会意外撑大容器 - 避免在
body上设padding-bottom：部分 Android WebView 会把 padding 算进可滚动区域，导致底部内容被遮住
env(safe-area-inset-bottom) 和 constant() 的兼容性取舍
iOS 11+ 支持 env(safe-area-inset-bottom)，但老版本 iOS 需要 fallback 到 constant(safe-area-inset-bottom)。两者不能共存于同一声明里，必须用 @supports 包裹。
- 只写
padding-bottom: env(safe-area-inset-bottom)→ iOS 11.2+ 正常，iOS 11.0–11.1 显示为 0 - 正确写法是：
padding-bottom: constant(safe-area-inset-bottom);<br>padding-bottom: env(safe-area-inset-bottom);
（后声明覆盖前声明） - 不要用 JavaScript 动态读取
safe-area-inset-bottom值再写 inline style：Safari 在页面加载初期可能还没注入该环境变量，容易取到 0
需要动态控制底部留白时，优先用 CSS 自定义属性 + JS 更新
比如键盘弹出后要加大底部空隙，或横屏切换时调整，硬编码多个 class 容易失控。用 CSS 变量 + style.setProperty() 更干净。
立即学习“前端免费学习笔记（深入）”；
- 在 :root 里定义
--bottom-safe: env(safe-area-inset-bottom, 0px) - JS 中更新：
document.documentElement.style.setProperty('--bottom-safe', '44px') - 对应样式写成
padding-bottom: calc(var(--bottom-safe) + 16px)，叠加固定间距也方便 - 注意：iOS 微信内置浏览器（X5 内核）不支持
env()，需提前检测并 fallback 到固定值
min-height: 100vh 在某些安卓浏览器里会算错高度，导致 padding-bottom 看不见；还有就是忘了在 meta viewport 里加 viewport-fit=cover，env() 值就永远是 0。 
