使用flexbox布局可实现内容自适应与底部导航固定效果，通过flex-direction: column和flex: 1使主体占满剩余空间，导航自然置于底部；若需滚动时导航始终可见，则结合position: fixed定位并设置z-index及内边距避免内容遮挡。
固定底部导航在现代网页设计中很常见，尤其适用于移动端或需要常驻操作入口的页面。结合 css Flexbox 和 position 属性，可以灵活实现内容自适应、导航栏始终固定在底部的效果。
使用 Flexbox 布局主结构
通过 Flexbox 构建页面整体布局，使主要内容区域自动填充可用空间，为底部导航预留位置。
关键思路：
- 将页面容器设为 flex 容器，方向为纵向（flex-direction: column）
- 让主体内容区域（main）使用 flex: 1 占据剩余空间
- 底部导航放在容器末尾，自然被“推”到底部
示例代码：
<div class="page"> <header>头部</header> <main class="content">内容区</main> <nav class="footer-nav">底部导航</nav> </div>
.page { display: flex; flex-direction: column; min-height: 100vh; /* 至少占满视口高度 */ } <p>.content { flex: 1; /<em> 自动扩展，填充空白区域 </em>/ }</p><p>.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 强制定位。不复杂但容易忽略细节。