height: 100% 在移动端常失效，因其依赖父容器明确高度，而 html/body 在滚动或 iOS 地址栏变化时无法稳定撑满视口；min-height: 100dvh 更可靠，但软键盘弹出时需 JS 动态修正 --vh 变量，并配合 flex 布局与合理定位避免继承陷阱。
为什么 height: 100% 在移动端经常失效
因为 height: 100% 依赖父容器有明确高度，而多数移动端根元素（如 html、body）在视口滚动时并不自动撑满 viewport 高度。尤其在 iOS Safari 中，地址栏收放会动态改变 window.innerHeight，但 CSS 不会重算百分比高度，导致子元素“塌”成 0。
min-height: 100vh 是更可靠的选择
vh 单位基于视口，不依赖父级高度计算，且现代浏览器支持良好（iOS 8+、Android 4.4+）。但要注意几个关键点：
-
100vh在 iOS Safari 中可能包含地址栏高度（即超出可视区），造成底部留白或滚动条；可改用100dvh（dynamic viewport height），它只取当前可见区域高度，Chrome 105+、Safari 16.4+ 支持 - 若页面内容可能超过一屏，用
min-height而非height，否则内容会被截断 - 避免对
html或body直接设min-height，某些安卓 WebView 会忽略；推荐作用于主容器（如.app或#root）
html, body {
margin: 0;
padding: 0;
}
#root {
min-height: 100dvh;
/* 回退方案 */
min-height: -webkit-fill-available;
min-height: 100vh;
}遇到软键盘弹出时 dvh 失效怎么办
Android 和部分 iOS 版本在软键盘弹出时不会更新 dvh 值，仍按原始视口计算，导致内容被遮挡。此时需结合 JS 动态修正：
- 监听
resize事件，读取window.innerHeight并写入 CSS 变量 - 用
min-height: var(--vh, 100vh)回退到静态值 - 注意防抖，避免频繁触发重排
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
window.addEventListener('resize', () => {
vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
});对应 CSS：
立即学习“前端免费学习笔记（深入）”；
#root {
min-height: calc(var(--vh, 1vh) * 100);
}Flex 布局下子元素高度不继承的常见陷阱
即使父容器设了 min-height: 100dvh，若子元素是 display: flex 容器，默认 align-items: stretch 也不保证子项填满——除非子项没设 height 或 flex 相关属性干扰。
- 避免给直接子元素设
height: 100%，它又回到依赖父级高度的老问题 - 正确做法是：父容器设
display: flex; flex-direction: column;，关键子项（如主体内容区）加flex: 1 - 如果用了
position: absolute，记得父容器加position: relative，否则top/bottom计算基准错乱
真正难处理的不是怎么写，而是不同设备对 vh、dvh、软键盘、滚动锚点的响应不一致。每次上线前最好在真机上测三遍：横屏、竖屏、键盘弹出后滚动到底部再回来。
