如何利用HTML实现移动端满屏布局_通过CSS 100vh单位设置-html教程-PHP中文网

100vh在ios safari中会因地址栏收起导致视口高度突变而失效，应优先使用100dvh并配合viewport设置、重置margin、box-sizing及min-height确保生效，老版本需css降级或js补偿。

如何利用html实现移动端满屏布局_通过css 100vh单位设置

直接用 height: 100vh 在移动端大概率出问题，尤其 iOS Safari —— 地址栏收起时视口高度突变，页面会闪白、留空或内容跳动。真要满屏，得组合 viewport 控制、100dvh 优先、必要时 JS 补偿。

iOS Safari 把“视觉视口”（含地址栏）当 vh 基准。滚动时地址栏收起，真实可视高度变大，但 100vh 值不更新，导致元素高度“卡在旧值”，底部露白或内容被裁。Android Chrome 也可能因缩放/滚动条触发类似问题。

不能只写 height: 100dvh 就完事。它需要容器能“撑开”且不被默认样式干扰。

必须加 <meta name="viewport" content="width=device-width, initial-scale=1.0">，否则移动端 dvh 不可靠
html, body { margin: 0; padding: 0; height: 100%; } —— 漏掉 margin: 0，顶部/底部会多出 8px 白边
推荐全局加 * { box-sizing: border-box; }，避免 padding 或 border 撑破 100dvh
优先用 min-height: 100dvh 而非 height: 100dvh：前者保底一屏、内容多时自然延展；后者会强制裁切、滚动失效

直接写两行，让新浏览器用 dvh，旧浏览器 fallback 到 vh：

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

section {
  min-height: 100dvh;
  min-height: 100vh;
}

别用 @supports (height: 100dvh) 包裹 —— Safari 16.3 识别 @supports 但不支持 dvh，反而导致降级失败。

如果项目必须支持 iOS 15.x 或更早，建议加 JS 监听 resize 和 orientationchange，手动设 style.height = window.innerHeight + 'px'
注意：键盘弹出时 window.innerHeight 也会变，需在 focusin/focusout 里补监听

写了 display: flex; justify-content: center; align-items: center 却不居中？根本不是 Flex 问题，是容器没“真正有高度”。

父容器必须同时满足：display: flex + min-height: 100dvh（或 100vh） + html, body { margin: 0 }
只给子元素设 height: 100% 没用 —— 它依赖父级有明确高度，而 min-height 不等于“可继承的高度”
如果用了 position: fixed 或 absolute，min-height 会失效，此时改用 height: 100dvh 更稳妥