如何用CSS视口单位svh与lvh构建全屏模态弹窗-css教程-PHP中文网

使用 100svh 作为模态框高度，配合 100lvh 作为后备方案，可以解决移动端浏览器地址栏伸缩导致的高度跳动问题。具体做法是在 css 中同时声明这两个属性，并设置 position: fixed 使其覆盖全屏，这样在 ios safari 等环境中，弹窗能稳定占据可视区域，避免内容被遮挡或出现滚动条。

如何用CSS视口单位svh与lvh构建全屏模态弹窗

为什么普通 vh 单位会导致布局抖动

普通 vh 单位基于初始包含块的高度，在移动端会随地址栏的显示与隐藏发生动态变化。当用户滚动页面时，地址栏收起，视口变高，vh 计算出的高度随之增加，导致原本固定的模态框突然变大或产生内部滚动。这种不稳定性破坏了全屏体验，因此需要引入更稳定的视口单位来替代。

如何用CSS视口单位svh与lvh构建全屏模态弹窗

/* 基础重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 模态框容器 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  /* 优先使用小视口高度，适配移动端地址栏收起状态 */
  height: 100svh;
  /* 兼容不支持 svh 的旧浏览器，回退到大视口高度 */
  height: 100lvh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* 模态框内容 */
.modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  max-width: 90%;
  max-height: 90%;
  overflow-y: auto;
}

svh 与 lvh 的具体行为差异

svh (Small Viewport Height) 对应地址栏收起时的最小视口高度，而 lvh (Large Viewport Height) 对应地址栏展开时的最大视口高度。在大多数现代移动端浏览器中，100svh 能确保内容不被底部导航栏或地址栏遮挡，因为它是基于当前可见的最小安全区域计算的。如果仅使用 100vh，在地址栏收起时，页面底部可能会被系统 UI 覆盖；如果仅使用 100lvh，在地址栏展开时，可能会产生不必要的空白区域或滚动。结合两者并使用 100svh 优先，能获得最佳的全屏一致性体验。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

如何用CSS视口单位svh与lvh构建全屏模态弹窗

如何处理不支持新单位的旧版浏览器

对于不支持 svh 和 lvh 的旧版浏览器，CSS 的回退机制至关重要。通过先声明 height: 100svh，再声明 height: 100lvh，浏览器会自动忽略无法识别的属性，执行最后一个有效的声明。在支持 svh 的环境中，将使用较小的值以防止遮挡；在不支持的环境中，回退到 lvh 或传统的 vh。为了进一步兼容极老版本，可以添加 height: 100vh 作为最终兜底。这种层叠写法无需 JavaScript 即可实现跨版本的稳定表现，确保所有用户都能获得基本可用的全屏模态体验。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！