How do I use var() inside of calc()?

Question

I am trying the following, in order to have the header's height subtracted from the element below it.

header {
  height: var(--header-height);

  --header-height: 150px;
}

main {
  height: calc(100% - var(--header-height));
}

What am I doing wrong?

Why isn't it calculating the "150px" value inside the calc()?

Because it doesn't. It displays the "property" you set which is the variable. Are you saying that this calc doesn't work? — Paulie_D, Jul 15 '21 at 12:35
Yes, the issue was that the calc() didn't load the variable I wanted to use in the equation. But when I moved the declaration of the variable to :root{}, it worked. — Michel Mendez, Jul 16 '21 at 12:50

score 0 · Answer 1 · edited Jul 15 '21 at 19:30

0

I moved the declaration of the variable to this:

:root {
  --header-height: 200px;
}

Now it works!

edited Jul 15 '21 at 19:30

Bhargav Rao

answered Jul 15 '21 at 12:36

Michel Mendez

it's all about scope, without your HTML we cannot answer – Temani Afif Jul 15 '21 at 14:26

1 Answers1