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.

Ingvar

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.

Deweese

nice, width: calc(100vw - 100px); use vw for width – Tews

Keep in mind that 100% is not the same thing as 100vw/100vh when there are scrollbars. 100% is innerWidth (or innerHeight); viewport width minus scrollbar width when present), 100vw is always viewport width (or height if we use vh units). Example: Let's say that our viewport is 500px in width and scrollbar width of our browser is 17px. We want to put 2:1 container (500 x 250px). We can't do width: 100%; height 50vw because container will have 500x250px size when there's no vertical scrollbar, and will have 483x250px size when vertical scrollbar appears. – Jeer

Anyway, this approach is great when we work with containers when scrollbars can't affect our interface. – Jeer

Our UI cant be scrolled beyond the max height or max-width of the display. Only DIV containers inside the screen area can be scrolled. So this is a great way to emulate desktop-ish behavior in a web-application. :) – Deweese

Answer 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.

Neat

Your answer would be more compelling if you were demonstrating it working in a GA/stable version and not a nightly build... – Barytes

@BoltClock, you're very correct. However, caniuse.com/calc indicates this feature has existed in Firefox since 4.0, which would lead me to believe it also works in the current stable version. – Neat

Answer 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.

Dibucaine

Answer 4

The more optimal way is to it like this:

height: calc(100% - 100px);

Cicero