Getting percentages to work in CSS calc() for Firefox and Safari?
css, firefox, safari
Solution
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.
Problem
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.