17370845950

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、软键盘、滚动锚点的响应不一致。每次上线前最好在真机上测三遍：横屏、竖屏、键盘弹出后滚动到底部再回来。