未定义变量时计算 css 高度

Question

我正在尝试将 div 的高度设置为全屏高度减去其他变量（例如页面横幅和页面通知）的高度。但是，页面通知并不总是出现在某些页面中，因此高度计算不适用于没有页面通知的页面。

我如何告诉CSS计算高度值，如果变量page-notification-height没有定义然后忽略它或将值设置为0？

.div {
  height: calc(100vh - var(page-banner-height) - var(page-notificaton-height));
}

Answer 1

你不会告诉css不计算这个，css很聪明，但也很笨。

你可以做的一件事是欺骗它，根据你设置变量的方式，你应该能够在 :root 选择器上设置默认值。在那里你可以将两辆车都设置为 0，这样当两个元素都不存在时，小腿将是 100%。