背景
移动浏览器的顶部地址栏和底部工具栏是动态变化的 —— 当用户首次打开页面时，这些 UI 元素会显示；而当用户开始滚动页面时，它们可能会自动隐藏，从而导致视窗高度发生变化。
问题的关键在于，100vh并不会感知这种动态变化。它始终以浏览器可能达到的最大高度为基准进行计算，这就导致页面内容经常出现截断或溢出的情况，严重影响用户体验。
CSS新单位：svh、lvh、dvh
1. svh（Small Viewport Height，小视窗高度）
2. lvh（Large Viewport Height，大视窗高度）
3. dvh（Dynamic Viewport Height，动态视窗高度）
如何选择合适的单位？
- 始终可见的内容：使用
100svh，确保元素不会被工具栏遮挡 - 沉浸式全屏体验：使用
100lvh，打造无干扰的视觉效果 - 动态自适应布局：使用
100dvh，让页面高度随工具栏状态自动调整
