最可靠方案是用 min-height: 100dvh 替代 height: 100vh，避免 safari 动态视口跳变；配合 flex: 1 或 grid 1fr 布局时，需确保父容器 display: flex/column 或 height 上下文完整，并为子元素显式设 min-height: 0。
用 height: 100vh 最直接，但要注意 Safari 的动态视口问题
直接写 height: 100vh 是最常用也最可靠的起点——它不依赖父元素高度，也不需要给 html 或 body 加 height: 100%。但 iOS Safari（尤其是 15+）会把 vh 解释为“当前可视区域高度”，地址栏收起/弹出、滚动时都会导致数值跳变，视觉上元素突然拉伸或塌陷。
- 若页面有固定
header和footer，改用height: calc(100vh - 80px)（80px 替换为实际像素值），避免用em或rem - 移动端软键盘弹出时，
vh缩放不可控，建议优先换用min-height: 100dvh（2023 年起主流支持，dvh= dynamic viewport height） - 别同时写
height: 100vh和min-height: 100vh，后者只在内容少时撑满，前者强制锁定一屏高，冲突
flex: 1 填不满？先检查父容器的 display 和 height 链
flex: 1 不是魔法，它只在父容器明确设了 display: flex 且主轴方向有确定尺寸时才生效。纵向填高必须配 flex-direction: column + 明确高度（如 height: 100vh 或 min-height: 100dvh）；漏掉任何一层，整个链就断了。
- 父容器没设
display: flex或flex-direction: column→flex: 1完全无效 - 祖先链中某级（比如中间一个
div）没继承高度 → 即使写了height: 100%，也会在那层中断 - 子元素内部有图片、
display: flex子项或长文本 → 默认min-height: auto锁死高度，必须显式加min-height: 0 - 推荐写
flex: 1而不是flex-grow: 1，因为前者等价于flex: 1 1 0%，flex-basis: 0%才能确保从零开始均分剩余空间
Grid 中用 1fr 填剩余高度，但 footer 会被挤出屏幕
如果布局是 header + main + footer，且希望 main 占满剩余视口、footer 保留在 DOM 里但不可见，可以用 Grid 的 grid-template-rows: auto 1fr 0。关键点在于：第三行设为 0 后，footer 元素本身仍会按默认 height: auto 渲染，必须额外加 height: min-content 让它脱离轨道约束，从而被“挤”到可视区域外。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
-
1fr只响应父容器的可用高度，所以父容器仍需设height: 100vh或min-height: 100dvh - 不要用
minmax(0, 1fr)替代1fr，它在某些旧浏览器中行为不一致 - 若
footer需要后续 JS 操作（比如滚动加载），这种“视觉隐藏但 DOM 存在”的方式比display: none更安全
为什么 height: 100% 总是失效
height: 100% 失效的根本原因是 CSS 百分比高度只对“有明确高度的父容器”生效。而浏览器默认的 html 和 body 高度由内容决定，不是全屏；即使你给它们加了 height: 100%，只要中间某层父元素没同步设高（比如一个没加 height: 100% 的 wrapper div），链就断了。
- Flex 或 Grid 容器内的子项用
height: 100%依然可能无效，因为 flex item 默认不继承父高度 - 移动端键盘弹出时，
%不响应视口变化，反而比vh更难控制 - 真正卡住人的不是语法，而是高度继承链的脆弱性——任意一层漏设，整条链就失效
实际项目里，100vh 和 flex: 1 是最常组合使用的方案，但必须意识到：它们都依赖父容器的高度上下文，而这个上下文在移动端尤其容易被软键盘、地址栏、Safari 的 dvh/vh 差异破坏。真正稳定的做法，是把 100dvh 作为基准，再配合 flex: 1 或 grid 分配，同时给所有可能撑高的子元素加 min-height: 0。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
