css - 让百分比在 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

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

height: calc(100vh - 100px);

代替

height: calc(100% - 100px);

终于，现在我可以继续我的元素了。