推荐用 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 分配比例