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

为我工作..：CSSDeck example - ＆gt; in Firefox Nightly

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

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

Answer 3

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

这很奇怪，但它适用于Chrome并且它不需要定义高度，但Firefox的情况并非如此

如果你有：

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

放：

.parent {
    height: 100%;
}

它应该没问题。

获得Firefox和Safari的CSS calc（）中的百分比？

3 个答案: