底部导航栏不能只用position: fixed是因为它脱离文档流，导致内容被遮挡且无法自适应安全区；必须配合padding-bottom预留空间、env(safe-area-inset-bottom)适配刘海屏，并确保点击热区和交互反馈。
底部导航栏为什么不能只用 position: fixed 就完事？
直接加 position: fixed; bottom: 0; 确实能让导航栏贴底，但页面内容会「被盖住」——尤其是滚动时，文字或按钮可能被导航栏遮挡。这不是视觉错觉，是盒模型里 fixed 元素脱离文档流后，其他元素完全不知道它存在。
常见错误现象：body 内容滚动到底部时，最后一行文字被导航栏挡住，用户点不到、看不清。
- 必须给主体内容区域预留出「导航栏高度」的空间
- 这个空间不能靠
margin-bottom（容易被子元素 margin 折叠），推荐用padding-bottom - 导航栏自身高度要明确（比如
height: 60px或min-height: 60px），否则padding-bottom值无法精准匹配
padding-bottom 该加在谁身上？
加在最外层容器上，通常是 body 或一个包裹全部内容的 <main> 元素。加在 html 上无效（html 默认不参与盒模型高度计算）；加在某个子 div 上则只影响局部，滚动时仍会露底。
推荐做法：用一个全高布局容器，内部用 flex 分配空间。
立即学习“前端免费学习笔记（深入）”；
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
main {
flex: 1;
overflow-y: auto;
}
.navbar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
background: #fff;
border-top: 1px solid #eee;
}
这样 main 自动撑满剩余空间，且不会被 navbar 覆盖，无需手动算 padding-bottom。
移动端适配时，viewport 和安全区怎么处理？
iOS Safari 底部有手势条，Android 部分全面屏也有虚拟导航键，单纯设 height: 60px 可能在某些设备上被截断或留白过多。
- 用
env(safe-area-inset-bottom)获取系统安全区高度，配合calc() -
height设为calc(60px + env(safe-area-inset-bottom))，再用padding-bottom: env(safe-area-inset-bottom)往上顶一点，避免按钮被手势条遮挡 - 记得加
viewportmeta：<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">，否则env()不生效
点击区域小、图标模糊？这些细节常被忽略
导航栏图标小、文字挤、点击反馈弱，不是样式问题，是交互基础没打牢。
- 确保每个导航项有足够点击热区：
min-height: 44px（iOS 最小触控建议），padding至少12px 16px - 用
background-image或<svg>替代小尺寸位图，避免高清屏模糊 - 添加
:active样式（哪怕只是opacity: 0.7），否则用户点下去没反馈，会反复点击 - 如果用
transform: translateZ(0)强制硬件加速，注意某些 Android WebView 会引发输入框失焦，慎用
真正难的不是让导航栏「固定在底部」，而是让它在各种屏幕、系统、交互状态下都「可点、可见、不打架」。安全区、热区、滚动行为、焦点管理——这些才是实际项目里卡住人的地方。
