<p>height: 100% 失效的根本原因是高度继承链断裂，需确保 html、body、SPA 根容器均设 height: 100%，或改用 calc(100vh - Xpx)、Flex 布局（父设 height + display: flex）、绝对定位（父 relative + 子 absolute top/bottom）等可靠方案。</p>
为什么 height: 100% 在单页应用里经常失效
因为单页应用（SPA）的根容器（如 #app 或 <div id="root"></div>）默认没有高度约束，它的父元素（body、html）若没显式设高，height: 100% 就会退化为 height: auto，最终只包裹内容，不撑满视口。
常见错误现象包括：底部留白、滚动条意外出现、Flex 子项无法拉伸、绝对定位区域高度计算为 0。
-
html, body { height: 100% }是必要前提，但还不够 —— SPA 容器本身也必须继承这个高度链 - React/Vue 应用常把
#app挂在body下，而body默认是min-height: auto，不是height: 100% - 使用 CSS-in-JS 或 Shadow DOM 时，样式作用域可能截断高度继承链，需手动穿透或重置
calc(100vh - Xpx) 适合固定头部/底部的场景
当页面有固定高度的导航栏（比如 64px）和页脚（比如 48px），主内容区要填满剩余空间，calc() 是最直接可靠的方案，不依赖 Flex 或 Grid 的渲染逻辑，兼容性好（IE9+）。
示例：
立即学习“前端免费学习笔记（深入）”；
.main-content {
height: calc(100vh - 64px - 48px);
overflow-y: auto;
}- 注意单位间必须有空格，
calc(100vh-64px)会解析失败 - 避免嵌套多个
calc()，部分旧版 Safari 对嵌套支持不稳定 - 如果头部高度是响应式的（如移动端缩为 48px），应配合媒体查询或 CSS 自定义属性动态更新
Flex 布局中子元素不拉伸？检查父容器是否“有高度”
很多人写 display: flex; flex-direction: column; 后，期望 .main 占满剩余空间，却加了 flex: 1 仍无效 —— 根本原因是父容器（如 #app）自身没有高度可分配。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
正确做法分两步：
- 确保高度链完整：
html, body, #app { height: 100%; } - 对容器启用 Flex 并设方向：
#app { display: flex; flex-direction: column; } - 对需要自适应的子项设
flex: 1，它才会基于父容器的可用高度拉伸
不要写 height: 100% 在子项上 —— 这会与 flex: 1 冲突，且在 Safari 中易触发渲染 bug。
绝对定位 + top/bottom 是最稳定的“窗口贴合”方案
对于后台类单页（如管理控制台），顶部导航固定、左侧菜单固定、右侧主内容需随窗口缩放实时调整高度，绝对定位仍是目前最可控的方式。
关键点：
- 父容器必须是
position: relative或position: absolute，否则top/bottom会相对于html计算 - 主内容区设
position: absolute; top: 64px; bottom: 0; left: 200px; right: 0;，无需指定height - 避免在该区域内混用浮动或未清除的 float 元素，它们不影响绝对定位区域的高度计算
- 若内容超长需滚动，务必加
overflow-y: auto，否则内容会溢出不可见
这种方案不依赖 JavaScript 监听 resize，无性能损耗，也不受 React/Vue 的重渲染影响 —— 高度变化完全由浏览器布局引擎自动完成。
最容易被忽略的是：绝对定位元素脱离文档流，它的父容器若没其他内容，高度会坍缩为 0。此时必须确保父容器本身有明确高度来源（比如上面说的 height: 100% 链），否则整个布局就“悬空”了。
