Getting percentages to work in CSS calc() for Firefox and Safari?

Question

I'm using the following calc() equation to calculate the width of two divs:

CSS

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

This works fine for Chrome and IE, but not Firefox and Safari. I've noticed that Firefox seems unable to interpret the percentage. For example the following will display fine:

CSS

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

Any advice?

Thanks.

Update

So out my pre-processor is creating css that looks like this:

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);
}

I've tried correcting it but it still doesn't seem to be working. The code from the browser is still:

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

It doesn't seem to be reading the -moz-calc though.

Answer 1

Eureka. I've been struggeling with this for days. Finally found that 100vh instead off 100% would make it work with most browsers.

height: calc(100vh - 100px);

instead of

height: calc(100% - 100px);

Finally, now I can get on with my project.

Answer 2

The reason for this not working is that the parent element does not have height value defined.

It is strange but it works for Chrome and it does not need defined height, but that is not the case for Firefox

If you have:

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

put:

.parent {
    height: 100%;
}

and it should be ok.