为什么CSS calc（100％-250像素）不工作？ [英] Why is CSS calc(100%-250px) not working?

问题描述

我在最新版本的Firefox，Chrome，IE 11中测试过。在使用CSS calc（）函数时，计算例如 width 。据我所见，我已经正确应用它。您可以查看

I've tested it in the most recent versions of Firefox, Chrome, IE 11. In none of those browsers it works when you use the CSS calc() function to calculate e.g. width. As far as I can see I have applied it properly. For reference you might want to check

http://www.sitepoint.com/css3-calc-function/

为什么这不工作？

div {
  background-color: blue;
  height: 50px;
  width: calc(100%-250px);
}

<div></div>

演示：

http：// codepen。 io / anon / pen / wazZWm

http： //jsfiddle.net/h5mzcow1/

编辑：

是的，这个问题发展成为在许多编辑过程中重复，但我仍然认为这应该保持在这里，因为它说明了问题比例如 CSS calc（）不工作。

推荐答案

这是因为你必须将一个空格 + 或 - 运算符，以使其正常工作。

It's because you have to put a space between the + or - operator in order for it to work properly.

div {
  background-color: blue;
  height: 50px;
  width: calc(100% - 250px);
}

<div></div>

MDN docs：

注意： + 和 - 运算符必须始终包含空格。
例如， calc（50％-8px）的操作数将被解析为
百分比，后跟负长度，无效表达式，而
calc（50％ - 8px）的操作数是百分比，后面是减号
符号和长度。更进一步， calc（8px + -50％）被视为
长度，后跟加号和负百分比。 * 和 /
运算符不需要空格，但添加一致性是
允许和推荐。

Note: The + and - operators must always be surrounded by whitespace. The operand of calc(50% -8px) for instance will be parsed as a percentage followed by a negative length, an invalid expression, while the operand of calc(50% - 8px) is a percentage followed by a minus sign and a length. Even further, calc(8px + -50%) is treated as a length followed by a plus sign and a negative percentage. The * and / operators do not require whitespace, but adding it for consistency is allowed, and recommended.

资料来源： MDN

W3C文档

这篇关于为什么CSS calc（100％-250像素）不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！