html - CSS Calc 返回 0 但在我的 fiddle 中有效

Question

我正在尝试使用 css3 calc 但它返回 0%。

width: calc(100% - 100px);

在我的本地机器上使用它然后检查它显示的元素:

width: calc(0%);

当我把它放在 fiddle 里时，它似乎在工作。

工作的部分是蓝色内容 div，它是侧边栏旁边的适当宽度，而在我本地，内容 div 的宽度为 0%。它显示了 div 中的内容，但不是蓝色背景。

Fiddle

calc 返回 0 有什么原因吗？我使用的是最新版本的 Firefox。

我已经查找了 calc 的替代方法，但除了 javascript 方法之外，没有一个适合我的需要。但我想避免这种方法。非常感谢任何帮助。

值得注意的是我使用了 Less

Answer 1

在 less 中，您将需要转义 calc

尝试:宽度:~"calc(100% - 100px)";

注意尝试 jsbin在 jsfiddle 上。它可以让你使用 sass 和 less。