未定义变量时计算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 选择器上设置一个默认值。在那里，您可以将两个 car 都设置为 0，这样当这两个元素都不存在时，小牛将是 100%。