推荐用 Flexbox 或 Grid 实现“头部—中间—底部”三段式布局：Flexbox 通过 flex-direction: column 与 flex: 0 0 60px、flex: 1 控制高度；Grid 用 grid-template-rows: auto 1fr auto 更简洁；需重置 body margin、防溢出、避免 height 冲突。
用 CSS 实现“头部—中间—底部”三段式布局，核心是把页面划分为三个垂直方向的区域，常见且推荐的方式是使用 Flexbox 或 Grid。多行区域划分，本质上就是将容器沿主轴（通常是列方向）分成三行：header、main、footer。
用 Flexbox 实现（推荐，兼容性好、逻辑清晰）
给 body 或一个外层容器设置 display: flex 和 flex-direction: column，再配合 flex 属性控制各区域占位：
- 外层容器设为
min-height: 100vh，确保撑满视口高度 - header 和 footer 设固定高度（如
height: 60px）或用flex: 0 0 auto防止伸缩 - main 区域设
flex: 1，自动填满剩余空间
示例代码：
html, body { margin: 0; height: 100%; }
.layout {
display: flex;
flex-direction: column;
min-height: 100vh;
}
header, footer {
flex: 0 0 60px;
background: #eee;
}
main {
flex: 1;
overflow-y: auto;
}
用 CSS Grid 实现（语义更强、更简洁）
直接定义三行轨道，用 grid-template-rows 明确划分：
立即学习“前端免费学习笔记（深入）”；
-
auto让 header/footer 自适应内容高度 -
1fr让 main 占满剩余空间（等价于 flex: 1） - 也可写成
60px 1fr 60px固定头尾高度
示例代码：
.layout {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
避免踩坑的关键细节
- 记得重置
body的默认 margin，否则顶部可能留白 - 若 main 内容超长，需加
overflow-y: auto防止整体溢出 - 不要对 header/main/footer 同时设
height: 100%，会导致高度冲突 - 在移动端，可结合
viewport设置和min-height: -webkit-fill-available增强兼容性
响应式微调建议
小屏幕下可考虑：
- header 和 footer 缩小高度（如用
clamp(48px, 5vh, 60px)） - main 区域加
padding避免内容贴边 - 用
@media调整 grid 行高或 flex 分配比例
