使用Flexbox布局使容器垂直排列，页眉固定高度，内容区域flex:1占满剩余空间；2. 通过position: sticky结合top:0实现页眉滚动时固定；3. 添加padding-top避免内容被遮挡，设置z-index防止层级覆盖，确保父容器无overflow:hidden以保证sticky生效。
实现页眉固定、内容自适应的布局是网页开发中的常见需求。核心思路是让页眉（header）始终停留在页面顶部，不随滚动而消失，同时让主内容区域自动填充剩余空间，并支持独立滚动。
1. 使用 Flexbox 布局实现结构
通过 Flexbox 可以轻松实现整体结构的自适应。将外层容器设为 flex 容器，让内容区域自动撑满可用高度。
示例代码：HTML 结构：
<div class="container">
<header class="header">这是页眉</header>
<main class="main-content">这里是内容区域</main>
</div>
CSS 样式：
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.container {
display: flex;
flex-direction: column;
height: 100vh; / 占满视口高度 /
}
.header {
height: 60px;
background-color: #333;
color: white;
position: sticky; / 关键：固定定位效果 /
top: 0;
z-index: 100;
}
.main-content {
flex: 1; / 自动填充剩余空间 /
overflow-y: auto; / 内容过多时可滚动 /
padding: 20px;
}
2. 使用 position: sticky 实现固定页眉
position: sticky 是实现固定页眉最推荐的方式。它结合了相对定位和固定定位的特点，只有在滚动到特定位置时才“粘”在视口顶部。
- 必须设置 top 值（如 top: 0）才能生效
- 父元素不能有 overflow:hidden 等限制，否则会失效
- 兼容性良好，现代浏览器均支持
3. 避免常见问题
在实际使用中，容易出现以下问题：
立即学习“前端免费学习笔记（深入）”；
- 内容被遮挡：如果页眉高度为 60px，可在 main-content 上加 padding-top: 60px 防止内容被遮住
- 移动端适配：建议使用 rem 或 vw 单位定义高度，提升响应性
- z-index 层级冲突：确保 header 的 z-index 足够高，避免被其他元素覆盖
基本上就这些。用 Flexbox 搭结构 + sticky 定位，就能实现简洁高效的固定页眉与内容自适应布局。不复杂但容易忽略细节。
