自定义导航栏后底部留白是因未关闭系统安全区预留空间，需在pages.json和manifest.json中同步配置safearea.bottom.offset为"none"，并在css中用env(safe-area-inset-bottom)动态处理底部内边距或定位。
为什么自定义导航栏后底部还有留白？
这不是“导航栏”本身的问题，而是你没关掉系统级安全区预留空间。uni-app 的 navigationStyle: "custom" 只接管顶部 UI 渲染，但 iOS 和部分安卓全面屏设备仍会按默认规则在页面底部插入 env(safe-area-inset-bottom) 高度的空白——尤其在 iPhone 14/15 Pro 系列上，这个值常为 34px 或 44px，且横竖屏切换时动态变化。
常见错误现象包括：
- 页面内容明明填满屏幕，底部却固定多出一道白边（背景色暴露）
- 使用
scroll-view时，滚动到底部后还能继续下拉，露出下方空白 -
page元素高度 100%，但真机上实际渲染区域被截断
pages.json 和 manifest.json 必须同步关闭底部安全区偏移
只改一处配置，大概率静默失败。两个文件都要动：
-
在
pages.json对应页面的style中加："app-plus": { "safearea": { "bottom": { "offset": "none" } } } -
同时在
manifest.json的app-plus节点下补全："safearea": { "bottom": { "offset": "none" } }
注意：这两个配置不能只写一个；pages.json 控制单页，manifest.json 是全局兜底，缺一不可。HBuilderX 不报错，但留白照旧。
CSS 层必须主动接管 safe-area-inset-bottom
即使配置了 offset: "none"，iOS 真机（尤其是 iOS 17+）仍可能 fallback 到默认行为。所以要在样式层双重防御：
-
在
App.vue或页面根元素上加：page { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); } -
如果页面有固定底部容器（如按钮栏、输入框），别只靠
padding-bottom，用：.bottom-fixed { position: fixed; bottom: env(safe-area-inset-bottom); left: 0; right: 0; }
鸿蒙端 env(safe-area-inset-bottom) 可能返回 0，建议加 fallback：
bottom: calc(20px + env(safe-area-inset-bottom, 34px));
自定义导航栏页面要防“disableScroll 连坐”
有人为解决顶部空白，给页面加了 disableScroll: true，结果导致整个页面不可滚动，只能靠 scroll-view 模拟——但这时如果没手动减去底部安全区高度，scroll-view 内容就会被顶高或截断。
正确做法是：
- 保留页面原生滚动（即不设
disableScroll） - 若必须用
scroll-view，其高度计算必须包含安全区：:style="{ height: `calc(100vh - ${navHeight}px - env(safe-area-inset-bottom, 34px))` }" -
navHeight建议用uni.getWindowInfo()动态取，别硬编码
最易被忽略的一点：安全区不是静态值。iPhone 15 Pro 的 Dynamic Island 激活时，env(safe-area-inset-bottom) 会从 34px 突然跳到 0px；横屏时它又可能变成 0。纯 CSS 无法响应变化，关键交互区域（如输入框、凸起按钮）得用 JS 监听 resize 或 orientationchange 事件重算位置。
