先记住这个答案
移动浏览器的地址栏和工具栏会改变可见区域。100svh 使用较小视口，通常能避免工具栏展开时底部被挡；100lvh 使用较大视口，工具栏展开时可能有部分内容落到可见区域外；100dvh 跟随当前可见高度变化，适合需要真正铺满屏幕的面板，但可能产生重排。没有一个单位适合所有页面。
svh取小视口高度lvh取大视口高度dvh随当前视口变化- 全屏面板需同时考虑安全区
全屏面板和首屏横幅的选择
登录弹层或移动端全屏菜单希望底部操作始终位于当前可见区域内，可以用动态视口高度。营销首屏如果不希望地址栏滑动时整块内容跳动，较稳定的小视口高度可能更合适。
.mobile-menu { min-height: 100vh; min-height: 100dvh; overflow: auto; }
.mobile-menu__actions { padding-bottom: env(safe-area-inset-bottom); }前一条 100vh 是旧环境回退，支持动态单位的浏览器会采用后写的 100dvh。底部安全区是设备物理边缘问题，不能只靠视口高度自动解决。
全屏固定面板还要检查键盘弹出时的行为：浏览器对键盘与视口的处理并不完全相同，不能保证 dvh 自动给输入框留出空间。
稳定与贴合可见区的取舍
svh 的尺寸较稳定，但工具栏收起时页面底部可能有额外空白。lvh 也稳定，却可能在工具栏出现时把底部内容放在屏幕外。dvh 尽量贴合当前视口，代价是工具栏状态变化时重新计算布局。
面试时先说需求：首屏背景、可滚动页面、固定底部按钮各自对稳定与可见性的要求不同。再选择单位，并在真机上检查浏览器工具栏、系统安全区和软键盘三种状态。
固定底部操作条与整页容器还要分开考虑。整页用 min-height: 100dvh 时，内容超过一屏仍可继续向下滚；若误写成固定 height: 100dvh 且隐藏溢出，键盘弹出后表单底部可能根本滚不到。真机测试时同时试工具栏展开、收起以及输入框获得焦点，观察按钮是否可见、内容是否能滚动，而不是只看静止截图是否铺满。
容易答错的地方
- 以为
100vh总等于眼前可见高度 - 移动浏览器工具栏会改变可见区域，传统
vh在不同环境中的表现不宜当成实时可见高度。 - 以为
dvh能处理所有键盘遮挡 - 软键盘对视口尺寸的影响因浏览器而异，还需实际测试滚动与焦点区域。
面试官还会怎么问？
不想滚动时横幅跳动用哪个？
通常考虑较稳定的 svh，但工具栏收起后的空余空间也要纳入设计。
底部按钮贴边还要处理什么？
检查 env(safe-area-inset-bottom)，避免被刘海或手势条区域遮挡。
旧浏览器不认识 dvh 怎么办？
先写 vh 等基础值，再写 dvh 覆盖；旧环境会忽略不认识的后者。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。