CSS calc недопустимое значение свойства

Question

CSS calc недопустимое значение свойства

Может кто-нибудь сказать мне, почему эта функция CSS calc не работает? Когда я проверяю элемент в Chrome, он говорит "недопустимое значение свойства".

width: calc((100vw - 14px * 2) / (270px + 11px * 2));

1031 4

css css3 css-calc

4 ответов:

Comments

Ничего не найдено.

Stephen Thomas · Accepted Answer · 2015-11-25 22:45:29

Вы не можете разделить на единицы, такие как px, только числа.

gibberish · Accepted Answer · 2018-04-08 23:54:47

Для будущих гуглеров:

Бесполезное сообщение "недопустимое значение свойства" в DevTools может просто означать, что вам нужно пустое пространство вокруг ваших операторов+ -/*.

Неверно (недопустимое значение свойства):
width:calc(100vh-60px)  <== no spaces around minus sign
Правильно:
width:calc(100vh - 60px) <== white space around the minus sign
Вопрос ОП выше не имеет этой проблемы, но при поиске ответа на это сообщение об ошибке это первый ресурс, который я нашел, поэтому он должен иметь ответ, посвященный этому общему ошибка.

Ссылки:

CSS3 calc () не работает в последней версии chrome

Https://www.smashingmagazine.com/2015/12/getting-started-css-calc-techniques/

Nesha Zoric · Accepted Answer · 2018-03-06 14:54:05

При использовании calc () вы не можете разделить на пиксели, Вы можете разделить только на безразмерные числа. Кроме того, число, которое вы делите, должно иметь определенную единицу, такую как px, em, vh, vw.

Например, если вам нужно задать ширину элемента, вы должны использовать:
width: (100px / 2); //this equals to 50px
Важно убедиться, что вы ставитепробелы между знаками операторов . Эта статьяcalc () дает более подробное объяснение функции.

Andrew Wasson · Accepted Answer · 2016-05-06 02:05:29

Как ответил Стивен Томас, вы не можете делить на единицы. Чтобы обойти это, просто разделите числа как числа, а затем назначьте единицу измерения, умножив результат на 1 единицу из единиц, которые вас интересуют. В вашем вложенном сценарии вам нужно было бы выяснить, какую единицу измерения вы ищете в конце, чтобы вы могли разделить числа и затем присвоить результат единице измерения px или vw.