flex-direction: column 实现底部自适应的关键约束是父容器必须有明确高度（如 min-height: 100vh），否则 flex: 1 或 margin-top: auto 失效；仅中间内容区设 flex: 1，头部和底部用 flex: 0 0 auto。
flex-direction: column 实现底部自适应的关键约束
用 flex-direction: column 做底部自适应，核心不是“加个 flex”，而是必须让容器有明确高度来源，否则 flex: 1 或 margin-top: auto 都会失效。
常见错误是直接给 body 或 html 设 display: flex; flex-direction: column;，但没设 height: 100vh —— 这时子元素的 margin-top: auto 不会把内容推到底部，因为父容器高度为 0。
- 父容器需显式设置高度，最常用的是
min-height: 100vh（兼容内容超长场景） - 底部区域不写
flex，只对中间内容区设flex: 1，才能撑开剩余空间 - 避免在底部元素上用
margin-top: auto同时又设flex: 0 0 auto，容易触发 Safari 的 flex 计算 bug
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
<p>.header { flex: 0 0 auto; }
.main { flex: 1; } /<em> 关键：只有它 flex-grow </em>/
.footer { flex: 0 0 auto; }grid 实现底部固定位置更直观，但要注意行轨道定义
Grid 更适合「明确分区」场景，比如页头、内容区、页脚三段式。但很多人漏掉 grid-template-rows，直接用 align-self: end 想把 footer 拉到底——这没用，因为没定义行轨道，所有元素默认挤在第一行。
真正起作用的是用 fr 单位分配剩余空间，或用 auto + 1fr 组合：
立即学习“前端免费学习笔记（深入）”；
-
grid-template-rows: auto 1fr auto是最稳写法：header 和 footer 自适应高度，main 占满剩余空间 - 若用
minmax(min-content, 1fr)替代1fr，可防内容极少时 main 区域塌缩 - 不要对 footer 单独设
justify-self: end，它属于行内对齐，和垂直定位无关
.container {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}两种方案在滚动行为上的实际差异
Flex column 和 Grid 在内容超出一屏时表现一致，但当内容很短时，它们对 footer 的处理逻辑不同：
- Flex 方案中，如果
.main内容少，flex: 1仍会撑开，footer 始终在视口底部；这是「视觉底部固定」 - Grid 方案中，
1fr同样会撑开，效果相同；但如果误写成grid-template-rows: auto auto auto，footer 就会紧贴 content 后面，失去底部效果 - 两者都不需要 JS 计算高度，但都依赖父容器有确定高度（
100vh或继承自某个有高祖先）
移动端和 Safari 的兼容性注意点
iOS Safari 对 100vh 的解析有坑：地址栏收放会导致视口高度变化，100vh 不实时更新，可能造成底部被遮挡或留白。这不是 flex/grid 本身的问题，而是单位选择问题。
- 稳妥做法是用
100dvh（dynamic viewport height），Chrome 105+ / Safari 16.4+ 支持 - 降级方案：用 JS 监听
resize动态设--vh: ${window.innerHeight * 0.01}px，CSS 中用calc(var(--vh, 1vh) * 100) - 旧版 Safari（gap 在 flex 容器上生效，但 grid 的
gap没问题，这点不用纠结
底部自适应看似简单，真正卡住人的往往是父容器高度没来源、单位选错、或者把「对齐」和「分配空间」两个概念混用了。写完记得在 iOS 真机上拖动地址栏看 footer 是否跳动。
