卡片未占满视窗因vh受父容器高度、body默认边距及移动端地址栏动态变化影响；应设html/body为height:100%且无边距，移动端优先用100dvh或min-height:100vh，配合calc()时注意box-sizing和滚动条，老浏览器需JS动态设置。
卡片高度设为 100vh 为什么没占满整个视窗？
因为 vh 是相对于「视口高度」的单位，但实际渲染时受父容器、滚动行为、地址栏缩放影响。最常见的是：页面有 <body> 默认 margin、父元素未设 height: 100%，或移动端 Safari 地址栏收放会动态改变 100vh 的实际像素值。
- 确保根级容器（
html和body）都设height: 100%且无 margin/padding - 移动端慎用纯
100vh：Safari 在页面滚动后地址栏隐藏，100vh不会重算，导致卡片被截断或留白 - 若卡片需撑满“可视区域+可滚动内容”，应改用
min-height: 100vh而非height: 100vh
用 calc() 补偿头部/底部固定元素时怎么写才不翻车？
当页面有固定定位的 header（高 60px）和 footer（高 44px），直接写 height: calc(100vh - 104px) 看似合理，但容易忽略 box-sizing、border、滚动条宽度等隐性开销。
- 务必确认卡片父容器的
box-sizing是border-box，否则 padding/border 会额外增加高度 - 如果 body 有默认滚动条（如 Windows），
100vh包含滚动条宽度，但减法计算时没预留，会导致轻微溢出；可用@supports (height: 100dvh)切换到更可靠的dvh - 推荐写法：
height: calc(100dvh - 60px - 44px)（dvh是动态视口单位，Safari 16.4+ 支持）
卡片内容溢出时，vh 高度 + overflow-y: auto 为啥滚动失效？
根本原因是：当父容器设了固定 height（如 height: 80vh），但子元素用了 flex: 1 或 height: 100% 且内部又嵌套 flex 容器时，浏览器可能无法正确解析高度继承链，导致 overflow 失效。
- 给卡片容器加
display: flex; flex-direction: column，再让内容区用flex: 1; overflow-y: auto - 避免在卡片内部再用
height: 100%—— 它会和外部vh形成循环依赖，尤其在 flex 布局中 - 检查是否意外触发了 BFC（比如 float、position: absolute），这会让
overflow对子元素失效
想兼容老浏览器（IE11）又需要视窗适配，还有没有更稳的方案？
IE11 不支持 dvh，对 vh 的处理也不一致（比如缩放时重算不准），此时靠纯 CSS 已不可靠，必须降级为 JS 驱动。
立即学习“前端免费学习笔记（深入）”；
- 监听
resize事件，用window.innerHeight动态设置卡片style.height - 注意防抖：不要每次 resize 都触发，用
requestAnimationFrame节流 - 首次渲染时也要手动执行一次，避免闪屏；可封装成简单函数：
updateCardHeight() - 现代项目建议用
env(height: titlebar-area-height)等原生 CSS 环境变量替代 JS，但 IE11 完全不支持，所以兼容层绕不开
CSS 视口单位看着简单，真正落地时，vh 的“动态性”反而成了最大干扰项——它既随设备变化，又受浏览器实现拖累，还容易和布局模型打架。别迷信一行代码解决所有场景，该加 JS 就加，该分环境就分。
