Getting percentages to work in CSS calc() for Fire

问题:

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.

回答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.

回答2:

Works for me..: CSSDeck example --> in Firefox Nightly

Are you using a CSS-preprocessor, which could interfere with calc()? Have you tried to replicate the issue in a controlled environment (plain html + css without any scripts etc)?

EDIT: Also note that calc(100%-3em) might not work, while calc(100% - 3em) should.

回答3:

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.