H5端底部fixed按钮被tabbar遮挡是因为uni-app用div模拟tabbar且不参与系统坐标计算，应使用--window-bottom替代bottom: 0，并叠加env(safe-area-inset-bottom)适配全面屏。
为什么H5端底部fixed按钮会被tabbar挡住
因为uni-app在H5端是用div模拟tabbar，它不是原生控件，不参与系统坐标计算；而页面元素的bottom: 0是相对于整个视口底边，不是“内容可用区域”的底边。结果就是按钮贴着屏幕最底下，直接叠在模拟tabbar上——小程序和App端却不会，因为它们的tabbar是原生层，天然“压”在webview之上。
用--window-bottom替代bottom: 0
uni-app为H5端注入了CSS变量--window-bottom，值等于模拟tabbar高度（默认50px），它只在H5生效，App和小程序里是0，所以无需条件编译。
- 错误写法：
bottom: 0→ 按钮沉底，被遮挡 - 正确写法：
bottom: var(--window-bottom)→ 按钮停在tabbar正上方 - 如果tabbar自定义了高度（比如
60px），需同步改pages.json中tabBar.height，否则--window-bottom仍为50px
安全区域叠加：iPhone X+机型底部“小黑条”也要躲
即使躲开了tabbar，iPhone全面屏的env(safe-area-inset-bottom)仍可能把按钮下半截吃掉。这时要叠加处理：
padding-bottom: calc(var(--window-bottom) + env(safe-area-inset-bottom))- 必须同时声明
constant(safe-area-inset-bottom)保兼容旧iOS WebKit：padding-bottom: calc(var(--window-bottom) + constant(safe-area-inset-bottom)) - 最终写法建议（兼容性兜底）：
padding-bottom: var(--window-bottom); padding-bottom: calc(var(--window-bottom) + env(safe-area-inset-bottom)); padding-bottom: calc(var(--window-bottom) + constant(safe-area-inset-bottom));
别踩这些坑
实际项目里最容易翻车的地方就这几个：
-
--window-bottom只对H5有效，写在App或小程序样式里不会报错但也不起作用 - 用了
position: fixed却没设left: 0; right: 0，宽度会塌缩，按钮偏移 - 在
scroll-view里套fixed按钮，iOS下fixed会失效，得用position: absolute+ 动态计算bottom - 某些H5容器（如微信内置浏览器）会忽略
env()，必须加constant()回退
真正要稳，就得把--window-bottom和env(safe-area-inset-bottom)当成两个独立维度来处理：前者解决tabbar遮挡，后者解决物理屏幕安全区。漏掉任何一个，在特定机型或平台下都会露出半截按钮。
