使用 Flexbox 设置容器为纵向弹性布局并占满视口，使 header 正常显示、main-content 占据剩余空间；2. 为 header 添加 position: sticky 和 top: 0，实现滚动时吸附顶部；3. 在 main-content 内设置 content-wrapper 并启用 overflow-y: auto 与 height: 100%，确保仅内容区滚动；4. 注意 sticky 兼容性，避免父元素 overflow: hidden，必要时添加 -webkit-sticky 前缀或降级处理。
实现固定页头与可滚动内容的布局，是现代网页开发中的常见需求。结合 Flexbox 的弹性布局能力与 position: sticky 的智能定位特性，可以轻松构建既美观又高效的页面结构。
使用 Flexbox 构建整体布局结构
通过 Flexbox 可以快速搭建一个自适应高度的页面骨架。将容器设为 flex 布局，并让主体内容区域自动填充剩余空间。
关键点在于设置外层容器高度为视口高度，并启用纵向 flex 布局：
立即学习“前端免费学习笔记（深入）”；
- 给
html和body设置height: 100%或min-height: 100vh - 主容器使用
display: flex和flex-direction: column - 页头（header）正常渲染，内容区设置
flex: 1占据其余空间
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header {
background: #007acc;
color: white;
padding: 1rem;
}
.main-content {
flex: 1;
overflow-y: auto; / 内容超出时允许滚动 /
}
利用 position: sticky 实现智能固定
position: sticky 是一种相对与固定定位之间的混合模式。元素在滚动到特定阈值前表现为相对定位，之后则像 fixed 一样固定在视口中。
将页头设置为 sticky，可以让它在页面滚动时“吸附”在顶部：
- 为 header 添加
position: sticky - 设定
top: 0表示距离视口顶部 0 时开始固定 - 确保父容器没有设置
overflow: hidden，否则会禁用 sticky
.header {
position: sticky;
top: 0;
z-index: 100; /* 避免被其他内容遮挡 */
background: #007acc;
color: white;
padding: 1rem;
}
滚动内容区域的处理技巧
为了让内容只在主体区域滚动而不影响页头，需控制滚动作用范围。推荐将实际内容包裹在一个子容器中并启用局部滚动。
- 在
.main-content内部嵌套一个.content-wrapper - 对这个 wrapper 设置
overflow-y: auto和height: 100% - 这样滚动仅发生在内容区，页头始终保持在顶部可见
这种结构特别适合长列表、文章阅读或后台管理界面等场景。
兼容性与注意事项
虽然大多数现代浏览器都支持 position: sticky，但仍需注意以下几点：
- Safari 需要前缀
-webkit-sticky（旧版本） - 父元素不能有隐藏溢出（如
overflow: hidden） - sticky 不适用于
display: table或浮动元素 - 在移动端测试滚动是否流畅，避免卡顿
若需支持老旧浏览器，可降级使用 JavaScript 模拟 sticky 效果，但多数情况下 CSS 方案已足够可靠。
基本上就这些。Flexbox 提供了清晰的结构划分，sticky 实现了轻量级的固定定位，两者结合无需 JS 就能完成专业级布局。
