若要设置为与视口一样高，您可以使用 vw 和 vh 单位。
vw 和 vh 我们已经很熟悉了，不多讲 ，如下图：
我们用的比较少的有vmin和vmax：
vmin是在vh和vw中获取最小值
vmax是在vh和vw中获取最大值
这些单位对各种浏览器有着很好的兼容，以下是兼容的浏览器版本：
但是！
虽然现有单位在pc设备上运行良好，但在移动设备上则截然不同。在移动设备上，视窗大小受动态工具栏的存在与否影响。这些工具栏是用户界面，例如地址栏和标签栏。
虽然视窗大小可以改变，但vw和 的vh大小不会改变。因此，尺寸过高的元素100vh会溢出视窗。
向下滚动时，这些动态工具栏将会缩回。在此状态下，高度使用100vh的元素将覆盖整个视窗。
为了解决这个问题，CSS 工作组指定了视窗的各种状态
Large viewport(lvh)：视窗大小假设任何动态扩展和缩回的 UA 界面都会缩回。 Small Viewport(svh)：视窗大小假设任何 UA 界面都可以动态扩展和缩回以进行扩展。
效果：
这时候，他们引用了一个新的单位，dvh 看图：
它会动态的获取窗口高度 不过这个单位兼容的浏览器版本比较高，所以需要谨慎使用
题外： 带有动态的单位还有：dvw、dvh、dvi、dvb、dvmin和dvmax等 它们的大小介于lv* 和sv* 对应单位之间。
总而言之：
svh 的 s 就是 small
lvh 的 s 就是 large
dvh 的 d 就是 dynamic
