Calculate css height when variable is not defined

Issue

I'm trying to set the height of a div to be the full screen height minus the heights of other variables, such as the page banner and page notification. However the page notification isn't always present in some pages and so therefore the height calculation is not working on pages where there is no page notification.

How could I tell CSS to calculate the value of the height, and if the variable page-notification-height is not defined then to just ignore it or set the value to 0?

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

Solution

You won’t be able to tell css to just not calculate this, css is smart, but it’s also really dumb.

One thing you could do is trick it though, depending on how you’re setting the variables you should be able to set a default value on the :root selector. There you could set both car’s to 0, so that the calf will be 100% when neither of the elements are present.

Answered By - Jonathan Knoll