Как использовать var() внутри calc()?

Я пытаюсь сделать следующее, чтобы высота заголовка была вычтена из элемента под ним.

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

  --header-height: 150px;
}

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

Что я делаю неправильно?

Почему он не вычисляет значение 150px внутри calc()?


css css-variables calc
person Michel Mendez    schedule 15.07.2021    source источник
comment
Потому что это не так. Он отображает установленное вами свойство, которое является переменной. Вы хотите сказать, что этот калькулятор не работает?   -  person Paulie_D    schedule 15.07.2021
comment
Да, проблема заключалась в том, что функция calc() не загружала переменную, которую я хотел использовать в уравнении. Но когда я переместил объявление переменной в :root{}, все заработало.   -  person Michel Mendez    schedule 16.07.2021

Ответы (1)


arrow_upward
0
arrow_downward

Я переместил объявление переменной сюда:

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

Теперь это работает!

person Michel Mendez    schedule 15.07.2021
comment
все дело в объеме, без вашего HTML мы не сможем ответить - person Temani Afif; 15.07.2021