上中下布局优先用flex或grid，禁用absolute；flex通过flex-direction:column+flex:1实现稳定自适应，grid用grid-template-rows:60px 1fr 60px语义更清晰，二者均避免手动计算与脱离文档流问题。
现代项目里，直接用 display: flex 或 display: grid 实现上中下布局，别碰 position: absolute + top/bottom 手动计算高度——后者在滚动、缩放、动态内容或视口变化时极易错位，且无法响应式回退。
用 flex 实现上下固定、中间自适应（最稳）
核心是让容器垂直堆叠，头尾定高，中间“吃掉剩余空间”。关键不是设 height，而是靠 flex: 1 主动占位。
- 父容器必须设
display: flex和flex-direction: column，且显式声明高度（如min-height: 100vh），否则flex: 1无参照 -
.header和.footer直接写height: 60px（或flex: 0 0 60px），锁定不伸缩 -
.main写flex: 1，不是flex: 1 1 auto；前者强制填满，后者可能因内容撑大而意外缩放 - 避免用
margin控制间距，改用gap: 12px——它不参与 flex 分配逻辑，不会导致中间区被压缩
用 grid 实现语义清晰的三段结构
适合需要明确行列层级、或未来可能扩展为多行多列的场景。比 flex 更贴近“结构即代码”的直觉，但对空内容更敏感。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 容器设
display: grid和grid-template-rows: 60px 1fr 60px，其中1fr表示“剩余可用高度均分单位”，行为等效于flex: 1 - 若
.main内容为空，高度可能塌陷——加min-height: 0或显式设grid-template-rows: 60px minmax(0, 1fr) 60px可修复 -
gap同样适用，且不会像margin那样触发隐式网格线创建 - IE11 不支持
1fr和gap（即使带-ms-前缀），真要兼容就切回 flex 方案
为什么不要用 absolute + top/bottom 模拟自适应
这种写法看似简单，但实际踩坑密集：
- 中间区域脱离文档流，无法自然撑开父容器；一旦父容器没设
height，整个布局会“消失” - 滚动时，
top和bottom值是相对于视口而非父容器，内容超出后容易遮挡或错位 - 无法响应字体缩放、DPR 变化（如 macOS Retina 屏）、或用户修改浏览器默认字号
- 如果头尾高度是动态计算的（比如根据文字行数），
top/bottom值就得 JS 同步更新，失去 CSS 布局优势
真正难的不是写出来，而是让中间区在各种边界条件下（空内容、长文本、缩放、横竖屏切换）都稳定撑满——flex 的 flex: 1 和 grid 的 1fr 是目前唯一能交出确定性答案的方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
