使用Flexbox布局可实现内容自适应与底部导航固定效果，通过flex-direction: column和flex: 1使主体占满剩余空间，导航自然置于底部；若需滚动时导航始终可见，则结合position: fixed定位并设置z-index及内边距避免内容遮挡。
固定底部导航在现代网页设计中很常见，尤其适用于移动端或需要常驻操作入口的页面。结合 CSS Flexbox 和 position 属性，可以灵活实现内容自适应、导航栏始终固定在底部的效果。
使用 Flexbox 布局主结构
通过 Flexbox 构建页面整体布局，使主要内容区域自动填充可用空间，为底部导航预留位置。
关键思路：- 将页面容器设为 flex 容器，方向为纵向（flex-direction: column）
- 让主体内容区域（main）使用 flex: 1 占据剩余空间
- 底部导航放在容器末尾，自然被“推”到底部
示例代码：
头部 内容区
.page {
display: flex;
flex-direction: column;
min-height: 100vh; /* 至少占满视口高度 */
}
.content {
flex: 1; / 自动扩展，填充空白区域 /
}
.footer-nav {
background: #333;
color: white;
padding: 1rem;
text-align: center;
}
结合 position 实现真正固定
如果希望导航栏始终贴在屏幕底部（即使滚动也不移位），可结合 position: fixed。
立即学习“前端免费学习笔记（深入）”；
适用场景：
- 移动 Web App 中常驻的操作栏
- Tab 导航需随时可访问
此时仍可保留 Flex 结构用于其他内容排版，仅对导航单独处理。
.footer-nav {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #333;
color: white;
padding: 1rem;
text-align: center;
z-index: 1000;
}
注意：使用 fixed 后元素脱离文档流，可能覆盖内容。需给 body 或 main 添加下边距或内边距腾出空间：
.content {
flex: 1;
padding-bottom: 60px; /* 为固定导航留出空间 */
}
灵活选择方案
根据需求选择合适方式：
- 用 Flex + 普通布局：导航在内容之后，但不会随滚动固定
- 用 Flex + fixed：视觉上固定在底部，适合高频操作入口
- 混合使用：主结构用 Flex 排版，特定元素用 position 控制定位
基本上就这些。关键是理解 flex: 1 的“吸满剩余空间”特性，再按需决定是否用 position 强制定位。不复杂但容易忽略细节。
