在前端页面布局场景中，顶部粘性导航条和底部页脚的固定定位是常见需求，传统布局方式往往需要复杂的CSS计算或者浮动处理，而Flexbox布局可以通过简单的属性配置实现两者的完美结合，同时适配不同高度的内容场景。
基础HTML结构搭建
首先我们需要构建包含导航条、主体内容、底部页脚的基础页面结构，所有内容都放在一个最外层的容器元素中，方便后续使用Flexbox布局控制子元素的排列。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox布局实践</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="page-container">
<!-- 顶部导航条 -->
<header class="sticky-nav">
<div class="nav-content">
<span class="logo">站点LOGO</span>
<nav class="nav-links">
<a href="#">首页</a>
<a href="#">关于我们</a>
<a href="#">产品服务</a>
<a href="#">联系我们</a>
</nav>
</div>
</header>
<!-- 主体内容区域 -->
<main class="main-content">
<h2>主体内容区域</h2>
<p>这里是页面的核心内容，内容高度可以动态变化。</p>
<p>当内容较少时，底部页脚会固定在页面最底部。</p>
<p>当内容较多时，页脚会跟随内容自然下移，不会出现布局错位。</p>
</main>
<!-- 底部页脚 -->
<footer class="footer">
<p>© 版权所有 底部页脚内容</p>
</footer>
</div>
</body>
</html>
核心CSS样式实现
外层容器Flexbox配置
最外层的page-container需要设置为Flex布局，方向为垂直排列，同时让容器的最小高度为整个视口的高度，这样当内容不足时，容器也能占满整个屏幕，为页脚固定在底部提供基础。
/* 重置默认边距 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Microsoft YaHei", sans-serif;
}
/* 外层容器Flex配置 */
.page-container {
display: flex;
flex-direction: column;
min-height: 100vh; /* 最小高度为视口高度 */
}
顶部粘性导航条实现
顶部导航条需要设置position: sticky属性，同时指定top: 0，让导航条在页面滚动到顶部时固定在视口顶部，不会跟随内容滚动消失。同时给导航条设置背景色和阴影，提升视觉效果。
/* 粘性导航条样式 */
.sticky-nav {
position: sticky;
top: 0;
z-index: 100; /* 保证导航条在其他内容上方 */
background-color: #2c3e50;
color: #fff;
padding: 0 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.nav-content {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
}
.logo {
font-size: 20px;
font-weight: bold;
}
.nav-links a {
color: #fff;
text-decoration: none;
margin-left: 30px;
font-size: 16px;
}
.nav-links a:hover {
color: #3498db;
}
主体内容与底部页脚布局
主体内容区域需要设置flex: 1属性，这个属性的作用是让主体内容区域自动占据除了导航条和页脚之外的所有剩余空间，这样当内容较少时，页脚就会被挤到页面最底部。底部页脚只需要设置基础样式即可，不需要额外的定位处理。
/* 主体内容样式 */
.main-content {
flex: 1; /* 占据剩余空间 */
max-width: 1200px;
width: 100%;
margin: 20px auto;
padding: 0 20px;
line-height: 1.8;
}
.main-content h2 {
margin-bottom: 15px;
color: #2c3e50;
}
.main-content p {
margin-bottom: 10px;
}
/* 底部页脚样式 */
.footer {
background-color: #34495e;
color: #fff;
text-align: center;
padding: 20px;
font-size: 14px;
}
效果验证与适配说明
完成上述代码后，我们可以测试两种场景的布局效果：
- 当主体内容较少时，页面容器的最小高度为视口高度，主体内容区域通过
flex:1占据剩余空间，底部页脚会固定在页面最底部，不会出现空白区域。 - 当主体内容较多，超过视口高度时，页面会出现滚动条，导航条会保持在顶部固定，页脚会随着内容自然下移，滚动到页面最底部才能看到。
如果需要兼容更老的浏览器，可以给Flexbox相关属性添加对应的浏览器前缀，不过目前主流现代浏览器都已经原生支持Flexbox布局，不需要额外处理。这种实现方式相比传统的使用position: fixed或者计算内容高度的方式，代码更简洁，适配性也更好。