底部导航栏应采用flex布局实现视觉固定而非position:fixed；通过min-height:100vh、flex-direction:column、justify-content:space-between及显式高度设置，确保内容不被遮挡且自适应。
底部导航栏固定在视口底部，但内容不被遮挡
直接用 position: fixed 会让导航栏脱离文档流，导致页面内容上移、被遮盖。真正要的是「视觉固定 + 内容留白」，而不是单纯压在最底下。
- 给
body或主容器设display: flex; flex-direction: column; min-height: 100vh - 让主要内容区域用
flex: 1占满剩余空间，自然撑开高度 - 底部导航栏不设
fixed，而是作为 flex 容器的最后一个子元素，靠margin-top: auto或align-self: flex-end推到底部（更推荐前者）
用 justify-content: space-between 把导航栏“推”到最底
当父容器是 flex 且 flex-direction: column 时，justify-content 控制的是**主轴方向（垂直方向）**上的对齐——也就是上下间距分配。它本身不会让导航栏“固定”，但能确保它始终贴着容器底部，哪怕内容很少。
- 只在父容器上设置
justify-content: space-between，不要在导航栏自身设 - 必须保证父容器高度至少为
100vh，否则没空间可分 - 如果内容很多导致滚动，导航栏会随滚动消失——这不是 bug，是预期行为；要「始终可见」才需
fixed
flex 布局下，导航栏高度影响内容区域自适应
导航栏高度必须可预测（比如固定 height: 60px 或 min-height），否则 flex: 1 的计算会出问题，尤其在 iOS Safari 中容易出现空白或溢出。
- 避免用
height: auto+flex: 1组合，会导致布局抖动 - 推荐显式写
height: var(--nav-height, 60px)，并在 :root 中定义变量便于维护 - 如果导航栏内有文字或图标，记得加
box-sizing: border-box，防止 padding/border 溢出高度
.app {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.main-content {
flex: 1;
overflow-y: auto;
}
.nav-bar {
height: 60px;
background: #fff;
border-top: 1px solid #eee;
}
底部导航栏是否“固定可见”，取决于你想要的是「视觉锚定」还是「绝对定位覆盖」；前者靠 flex 布局留白实现，后者才用 fixed —— 两者不能混用，否则高度计算冲突，iOS 上尤其容易出空隙或重叠。