flex 是首选方案，因其对动态内容、min-height 变化兼容性最佳且行为可预测；grid 在 ie11 不可用且空内容易塌陷；absolute 使中间区脱离文档流，缩放/dpr/打印时极易错位。
用 display: flex + flex-direction: column 实现上中下标准结构，是当前最稳、最易维护的方案；别碰 position: absolute 模拟自适应，它在滚动、缩放、动态内容加载时大概率错位。
为什么 flex 是首选，而不是 grid 或 absolute
管理系统页面通常有固定头部（导航/搜索）、可变高度中间区（表格/表单/图表）、固定底部（版权/状态栏），且需支持动态内容撑开、滚动容器隔离、响应式缩放。这些场景下：
-
flex对空内容、动态高度、min-height变化兼容性最好，flex: 1行为可预测 -
grid的1fr在 IE11 完全不可用，且当.main内容为空时可能塌陷（需额外加min-height: 0） -
position: absolute+top/bottom会让中间区脱离文档流，父容器无法被撑开，打印、缩放、DPR 变化（如 macOS Retina 屏）下布局断裂风险极高
flex 布局的关键 CSS 规则
核心不是“设高度”，而是让中间区主动占满剩余空间。必须满足三个条件：
- 父容器设
display: flex和flex-direction: column，且显式声明高度参照，例如min-height: 100vh（不能只靠height: 100%，否则无根可依） -
.header和.footer用flex: 0 0 60px（锁定不伸缩），避免写height: 60px后被 margin 或 padding 拉宽 -
.main必须用flex: 1（不是flex: 1 1 auto），后者在内容超长时可能意外压缩 - 间距统一用
gap: 12px，它不参与 flex 分配逻辑，比margin更安全
常见错误现象与修复点
实际写管理系统时，以下问题高频出现：
- 中间区没显示或高度为 0：检查父容器是否漏了
min-height: 100vh，或.main被设了overflow: hidden且内容溢出被裁剪 - 滚动条出现在整个页面而非仅
.main：给.main加overflow-y: auto，并确保其父级（即 flex 容器）未设overflow: hidden - 表格/列表在
.main中撑不开高度：确认表格本身没设死height，或用了el-table等组件时，传入的:height应为计算值，例如:height="mainHeight"，并在 JS 中监听窗口 resize 动态更新 - 移动端字体放大后头尾错位：禁用
absolute后此问题自然消失；若仍异常，检查是否对rem或em单位做了不当缩放
真正难的不是写出三块区域，而是让它们在用户缩放、读屏、打印、DPR 切换等所有上下文中都保持语义正确和视觉连贯——flex-direction: column + 显式高度参照 + flex: 1 是目前最经得起考验的组合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
