随机掉落的项目足迹：100vh - 50px——减法居然还能这么玩儿？

需求是这样的

顶部导航栏是 50px，然后左侧导航栏的高度需要占满屏幕剩余的高度，那么问题来了，剩余的高度是多少？

很显然，不同的屏幕尺寸对应的像素值也不同，我们需要适配所有尺寸的屏幕，所以绝对不能用 px 单位

但是，如果用 vh 为单位的话，我们就需要用 100vh 减去导航栏的高度 50px ，两个单位不相同，也不能减啊

但今天，我向 chatGPT请教了一番，他的操作让我大为震撼，原来100vh - 50px​​​​​​​ 是能计算的！减法居然还能这么玩儿？

calc() 是一种 CSS 函数，用于在样式中进行动态计算。它允许你使用不同单位（如像素、百分比等）进行简单的数学运算，比如加、减、乘和除。通过 calc(), 你可以灵活地设置元素的大小或位置，便于响应式设计。例如，height: calc(100vh - 50px) 可以让元素的高度等于视口高度减去 50 像素