使用CSS calc()函数获取当前可视屏幕高度

在CSS中， calc() 函数是一个强大的工具，它允许我们执行基本的数学运算，如加法、减法、乘法和除法等，来动态计算CSS属性的值。这在需要根据屏幕尺寸或元素尺寸进行动态调整时特别有用。

要获取当前可视屏幕的高度，我们可以使用 vh （视口高度）单位，它代表视口（即浏览器窗口）高度的百分比。 100vh 表示视口高度的100%，即全屏高度。但是，如果你想要根据屏幕高度减去某个固定值（例如，一个头部导航栏的高度）， calc() 函数就派上用场了。

下面是一个简单的例子，展示如何使用 calc() 函数从屏幕高度中减去一个固定的值：

假设你有一个页面，顶部有一个高度为 70px 的导航栏，你想要主体内容区域从导航栏下方开始，并占据剩余的可视屏幕高度。你可以这样写CSS：

body {
  margin: 0;
  padding: 0;
  height: 100vh; /* 设置body高度为全屏高度 */
  display: flex;
  flex-direction: column;
}
.navbar {
  height: 70px; /* 导航栏高度 */
  background-color: #333;
  color: white;
  padding: 10px;
}
.main-content {
  flex: 1; /* 占据剩余空间 */
  background-color: #eee;
  padding: 20px;
  height: calc(100vh - 70px); /* 使用calc()从屏幕高度中减去导航栏高度 */
}