【问题标题】：Why is CSS calc(100%-250px) not working? [duplicate]为什么 CSS calc(100%-250px) 不起作用？ [复制]
【发布时间】：2015-08-05 09:56:06
【问题描述】：

我已经在最新版本的 Firefox、Chrome、IE 11 中对其进行了测试。在这些浏览器中，当您使用 CSS calc() 函数进行计算时，它都不起作用。 width。据我所见，我已正确应用它。作为参考，您可能需要检查

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

为什么这不起作用？

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

&lt;div&gt;&lt;/div&gt;

演示：

http://codepen.io/anon/pen/wazZWm

http://jsfiddle.net/h5mzcow1/

编辑：

是的，这个问题在许多编辑过程中发展成为重复，但我仍然认为这应该保留在这里，因为它比例如 CSS calc() not working 更好地说明了问题。另外，恕我直言，答案要好得多。

【问题讨论】：

是的，经过多次编辑，结果是重复的（最初我假设它不适用于 jsfiddle 和 codepen 等在线代码编辑器），但这个有更好的格式答案给它。
我不同意另一个应该被标记为重复，因为，真的，这个问题应该通过搜索来回答。已多次回复：stackoverflow.com/q/15108285/3150271 | stackoverflow.com/q/14967421/3150271 | stackoverflow.com/q/25211621/3150271
Ofc 我先搜索了，但我的搜索包括“Codepen”和“Snippets”，就像我原来的问题标题一样，它没有返回合适的结果。这就是它的发展方式（已经在之前的评论中解释过)。
好的，我明白你的意思了。不过，出于好奇，是什么让您认为这些地方确实发生了？
我试图在 SO 上帮助其他人解决不同的问题，并在 sn-p 中使用它，但它没有用。所以我检查了 Codepen，然后检查了 JSFiddle，但没有成功。这就是我所尝试的，这对我来说已经足够了。

标签： css

【解决方案1】：

这是因为您必须在+ 或- 运算符之间放置一个空格，才能使其正常工作。

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

&lt;div&gt;&lt;/div&gt;

来自 MDN 文档：

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

来源：MDN

W3C Documentation

【讨论】：

你能分享一下为什么要包含的空间吗？这是正确的表达方式还是为什么没有空格就不能计算？
解决了！我复查的文件都没有发现值得注意的，这不是很奇怪吗？
MDN上提到过
@ManojKumar 我已经更新了这个问题，所以它对其他人更有用。另外，我已经包含了 MDN 的解释。
很好的答案，格式也很好，包含所有相关信息，而且简短而准确！