user2078938 user2078938 - 5 months ago 42
CSS Question

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

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

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.