动态高度计算需用#{$var}拼接calc()、区分vh/%参照系、优先dvh降级至vh、修复flex/grid中100%失效须设父高或flex:1。
动态高度计算必须避开 calc() 里的 Sass 变量直接插值
直接在 calc() 中写 calc(100vh - $header-height) 是无效的——CSS 不认识 Sass 变量，浏览器解析时会报 Invalid property value。Sass 在编译期就把变量替换成数值，但前提是它得在纯 CSS 函数作用域外。
- 正确做法：用 Sass 的
calc()字符串拼接，比如calc(100vh - #{$header-height}) - 如果
$header-height是64px，编译后生成calc(100vh - 64px)，浏览器才认 - 别对
rem或em值做算术运算再塞进calc()，Sass 不会自动转换单位，2rem + 16px会原样输出导致无效
Sass 函数封装百分比高度逻辑要区分视口 vs 父容器基准
所谓“动态百分比”，本质是选对参照系：vh 是相对视口，% 是相对父元素高度——二者不能混用，但常被误当作等价方案。
- 需要撑满整个屏幕可视区？用
height: calc(100vh - #{$navbar-height})，别用height: 100%（父容器没设高就塌掉） - 需要随父容器缩放？确保父元素有明确
height（哪怕用min-height），再用height: percentage($ratio)配合自定义函数 - 自定义函数示例：
@function percentage($ratio) { @return #{$ratio * 100}%; }调用height: percentage(0.75)输出75%，但注意这只是字符串替换，不校验父容器是否可撑高
响应式高度适配中，vw/vh 单位的兼容性陷阱
iPhone X 及之后机型、Android P+ 的刘海屏/挖孔屏会让 100vh 溢出到不可见区域，表现为底部内容被截断——这不是代码写错，是视口单位本身的局限。
- 安全解法：用
100dvh（dynamic viewport height），Chrome 105+、Safari 16.4+ 支持，Firefox 正在跟进 - 降级方案：
height: 100vh; height: 100dvh;，后者覆盖前者（支持时生效） - 千万别用 JS 动态写
style.height去算window.innerHeight，滚动时触发重排，卡顿明显，且 SSR 场景下服务端无法获取该值
嵌套 flex / grid 容器里 height: 100% 失效的根本原因
不是百分比写错了，而是 flex 子项默认不继承父容器高度——height: 100% 找不到计算基准，结果是 height: auto。
- 修复关键：给父容器加
height: 0或显式height: 100%，同时子项设align-self: stretch（flex）或height: 100%（grid） - 更稳妥：直接用
flex: 1替代height: 100%，它不依赖父高，靠 flex 分配剩余空间 - Grid 场景下，若需某区域占满剩余高度，优先用
grid-template-rows: auto 1fr auto，而非对 item 设height: 100%
实际项目里最常漏掉的是 dvh 降级和 flex 父容器高度声明这两处，一漏就整块区域高度错乱，而且不容易一眼定位到根因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
