CSS Calc返回0,但在我的小提琴中工作

flo*_*oor 3 html css css3 less

我试图使用css3 calc,但它返回0%.

width: calc(100% - 100px);
Run Code Online (Sandbox Code Playgroud)

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

width: calc(0%);
Run Code Online (Sandbox Code Playgroud)

当我把它放在一个小提琴中时,它似乎正在起作用.

正在工作的部分是蓝色内容div是侧边栏旁边的正确宽度,而在我的本地,内容div的宽度为0%.它显示div中的内容,但不显示蓝色的背景颜色.

小提琴

有什么理由计算会返回0吗?我使用的是最新版本的firefox.

我已经查找了calc的替代方案,除了javascript之外,没有其他方法适合我的需求.但我想避免这种方法.任何帮助是极大的赞赏.

值得注意的是我使用的是Less

atm*_*tmd 7

你需要逃脱 calc

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

NB尝试jsbin过的jsfiddle.它可以让你使用sass更少.