让百分比在 Firefox 和 Safari 的 CSS calc() 中起作用？

Question

我正在使用以下 calc() 公式来计算两个 div 的宽度：

CSS

.MyClass {
    width: calc((100% - 800px) / 2);
    width: -moz-calc((100% - 800px) / 2);
    width: -webkit-calc((100% - 800px) / 2);
}

这适用于 Chrome 和 IE，但不适用于 Firefox 和 Safari。我注意到 Firefox 似乎无法解释百分比。例如以下将显示正常：

CSS

width: calc((1000px - 800px) / 2);

有什么建议吗？

谢谢。

更新

所以我的预处理器正在创建如下所示的 css：

SCSS

.MyClass {
    width: calc( ( 100% - #{$WrapperWidth} ) / 2 ) ;
    width: -moz-calc( ( 100% - #{$WrapperWidth} ) / 2 ) ;
    width: -webkit-calc( ( 100% - #{$WrapperWidth} ) / 2 ) ;
}

CSS

.MyClass {
  width: calc( ( 100% - 800px ) / 2);
  width: -moz-calc(100%-800px/2);
  width: -webkit-calc(100%-800px/2);
}

我已经尝试纠正它，但它似乎仍然无法正常工作。 来自浏览器的代码仍然是：

width: calc((100% - 800px) / 2);

它似乎没有读取 -moz-calc。

Answer 1

尤里卡。这几天我一直在为此苦苦挣扎。最后发现 100vh 而不是 100% 将使其适用于大多数浏览器。

height: calc(100vh - 100px);

而不是

height: calc(100% - 100px);

终于，我可以继续我的项目了。

Answer 2

这不起作用的原因是父元素没有定义高度值。

这很奇怪，但它适用于 Chrome，并且不需要定义高度，但 Firefox 不是这样

如果你有：

<div class="parent">
    <div class="child"></div>
</div>

放：

.parent {
    height: 100%;
}

应该没问题。

Answer 3

为我工作..：CSSDeck example --> in Firefox Nightly

您是否使用了可能会干扰 calc() 的 CSS 预处理器？您是否尝试在受控环境中复制问题（纯 html + css 没有任何脚本等）？

编辑：还要注意calc(100%-3em) 可能不起作用，而calc(100% - 3em) 应该。