CSS使用calc()获取当前可视屏幕高度的实现

要在CSS中获取当前可视屏幕的高度，可以使用calc()函数在Height中混合百分比和像素单位。下面是实现的步骤:

1. 确定当前视口高度

要获取当前视口的高度，需要使用ViewPort单元 (VW)。ViewPort单元的一个单位等于视口宽度的1%，所以100 VW 抵押一定等于整个视口的宽度。通过把视口高度设置为 calc（100vw / X）,其中的X代表想要的视口高度相对于视口宽度的百分比。

注意：必须将HTML和BODY元素的高度设置为100%，为了能够设置视口高度为100vh，以便准确计算视口高度。

示例1：将视口高度设置为100vh，然后使用calc()获取当前视口高度的50%作为元素高度。

html,
body {
  height: 100%;
}
.element {
  height: calc(50vh)；
}

2. 嵌套视口百分比尺寸

可以在Viewport尺寸的基础上使用百分比值来设置高度。视口百分比单位（VH）可以作为已知高度的屏幕百分比。

示例2: 在Nav元素中，设置高度为视口的50%，然后将其内部的Ul元素高度设置为100%填充NavBar元素的高度。

html,
body {
  height: 100%;
}
.nav-bar {
  height: calc(50vh);
  background-color: #ccc;
}
.nav-bar ul {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}