必须给html和body显式设高度，否则height:100vh会失效；因父容器高度为auto时，100vh计算基准坍塌，常得0或极小值；推荐html,body{margin:0;min-height:100vh}并fallback至100dvh。
必须给 html 和 body 显式设高度，否则 height: 100vh 在多数场景下会失效——这不是 flex 写错了，是父级容器根本没撑开。
为什么只给 flex 容器加 height: 100vh 不行
flex 项目（子元素）默认不继承高度，height: 100vh 只对当前元素生效；如果它的父级（比如 body）高度是 auto，那这个 100vh 实际计算基准就塌了。浏览器会按“父容器内容高度”去算 100vh，结果常为 0 或极小值。
-
html和body都要加min-height: 100vh（比height: 100vh更安全，兼容内容超长滚动） - 同时清除默认
margin：html, body { margin: 0; } - 若使用
100dvh（推荐用于移动端），需确认目标环境支持（iOS 16.4+、Android Chrome 109+）
flex-direction: column 后，中间区域怎么填满剩余空间
仅设 flex-direction: column 不会让子元素自动占满高度——它只定义排列方向，不分配空间。真正起作用的是 flex: 1 或 flex-grow: 1，且必须施加在需要伸缩的直接子元素上。
- 给中间内容区（如
.main）设flex: 1，不是height: 100%（后者在 flex 容器中常无效） - 避免给
.main设height、max-height或overflow，除非你明确要限制其滚动范围 - 如果
.main里还有嵌套 flex 布局，记得它的父级也要有明确高度来源（比如继承自上层flex: 1）
移动端 Safari 的 100vh 抖动问题怎么绕过
iOS Safari 地址栏收放、软键盘弹出时会动态重算视口高度，导致 100vh 瞬间变大或变小，页面“跳动”，footer 悬空半秒。这不是 CSS 错误，是 WebKit 渲染机制限制。
立即学习“前端免费学习笔记（深入）”；
- 优先用
min-height: 100dvh替代height: 100vh，但得 fallback：min-height: 100vh; min-height: 100dvh; - 不要依赖
resize事件监听视口变化——Safari 不触发或延迟严重 - 若必须兼容老 iOS（window.innerHeight 并写入 CSS 变量，但会引入布局抖动风险
margin-top: auto 让 footer 贴底，但为什么有时没反应
margin-top: auto 在 flex-direction: column 下才有效，且只对 flex 容器的**直接子元素**起作用。它本质是让该元素在主轴（垂直方向）上“挤走前面所有兄弟元素的剩余空间”。
- 确保 footer 是 flex 容器的**第一个层级子元素**，中间不能套
div包装层 - 别给 footer 同时设
height和margin-top: auto，旧版 Safari 会错误计算剩余空间，导致 main 高度塌缩 - 不要用
align-self: flex-end试图“沉底”——那是控制交叉轴（此时为水平方向），只会让它靠右
最易被忽略的一点：所有高度控制都依赖「可计算的高度链」。从 html → body → .app → .main，任意一环缺失显式高度声明或被 overflow: hidden / max-height 截断，整个 flex 分配逻辑就会中断。检查时建议逐层用 DevTools 查看 computed height，而不是只盯 CSS 规则。
