在移动端页面开发中，固定底部导航是提升用户操作便捷性的常用设计，结合CSS Flexbox和position属性可以高效实现这个效果，同时保证页面内容布局的合理性。
实现原理说明
要实现固定底部导航，核心思路是将页面整体分为内容区域和导航区域两部分，使用Flexbox控制两部分的高度分配，同时使用position属性将导航固定在视口底部。具体来说，Flexbox的作用是让内容区域自动占据除导航外的剩余高度，避免内容被导航遮挡；position:fixed的作用是让导航始终停留在视口底部，不随页面滚动而移动。
核心属性作用
- display:flex：将容器设置为弹性布局，子元素可以按照弹性规则分配空间
- flex-direction:column：让弹性子元素垂直排列，符合内容在上、导航在下的布局结构
- flex:1：让内容区域自动占据剩余空间，保证导航始终在底部
- position:fixed：将导航固定在视口指定位置，不受页面滚动影响
- bottom:0：指定导航固定在视口的底部边缘
完整实现步骤
1. HTML结构搭建
首先搭建基础的页面结构，包含内容容器和底部导航容器，导航内部可以放置多个导航项：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>固定底部导航示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="page-container">
<div class="content">
<h3>页面内容区域</h3>
<p>这里是页面的主要内容，会占据除底部导航外的所有空间。</p>
<p>可以填充更多内容测试滚动效果。</p>
<p>测试内容测试内容测试内容测试内容测试内容</p>
<p>测试内容测试内容测试内容测试内容测试内容</p>
<p>测试内容测试内容测试内容测试内容测试内容</p>
<p>测试内容测试内容测试内容测试内容测试内容</p>
<p>测试内容测试内容测试内容测试内容测试内容</p>
</div>
<div class="bottom-nav">
<div class="nav-item">首页</div>
<div class="nav-item">分类</div>
<div class="nav-item">购物车</div>
<div class="nav-item">我的</div>
</div>
</div>
</body>
</html>
2. CSS样式编写
接下来编写对应的CSS样式，结合Flexbox和position属性实现固定效果：
/* 重置默认样式，避免浏览器默认边距影响布局 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
/* 页面容器设置为弹性布局，垂直排列子元素 */
.page-container {
display: flex;
flex-direction: column;
min-height: 100vh; /* 容器最小高度为视口高度，保证内容不足时导航也在底部 */
}
/* 内容区域自动占据剩余空间 */
.content {
flex: 1;
padding: 20px;
background-color: #f5f5f5;
}
/* 底部导航样式 */
.bottom-nav {
display: flex;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #ffffff;
border-top: 1px solid #e5e5e5;
z-index: 999; /* 保证导航在其他内容上方 */
}
/* 导航项样式 */
.nav-item {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #333333;
}
/* 导航项激活状态样式 */
.nav-item.active {
color: #1890ff;
}
3. 适配优化说明
上面的代码已经可以实现基础的固定底部导航效果，但还需要做一些适配优化：
- 给内容区域底部添加padding，避免内容被导航遮挡：
padding-bottom: 60px;，60px是导航的高度 - 在iOS设备中，底部可能有安全区域，需要添加安全区域适配：
padding-bottom: calc(60px + env(safe-area-inset-bottom)); - 导航的高度可以根据实际需求调整，对应的内容区域padding-bottom也要同步调整
常见问题解答
为什么导航会遮挡内容？
这是因为没有给内容区域预留导航的高度空间，需要在.content样式中添加对应导航高度的底部内边距，或者给.page-container设置padding-bottom，值为导航的高度。
Flexbox和position能不能只用其中一个实现？
只用position:fixed可以实现导航固定，但内容区域的高度不好控制，容易出现内容被遮挡或者内容不足时导航不在底部的问题；只用Flexbox无法实现导航随页面滚动固定在底部，所以两者结合是最优方案。
导航在滚动时出现抖动怎么办？
可以给导航添加transform: translateZ(0);开启硬件加速，减少滚动时的渲染抖动，同时避免给导航设置不必要的动画效果。
最终效果验证
完成上述代码编写后，在浏览器中打开页面，滚动内容时导航会始终固定在底部，内容区域会自动占据剩余空间，不会被导航遮挡，在不同屏幕尺寸的设备上也能保持正常的布局效果。
CSS_Flexbox固定底部导航Flexposition修改时间：2026-06-16 09:48:33