Using CSS3 calc() function

Question

I'm trying to use the calc() function, but it return the wrong value.

I'm using this:

height: calc(100% - 45px);  
height: -webkit-calc(100% - 45px);  
height: -moz-calc(100% - 45px);

..but it sets the height to 55%. Why? What am I doing wrong here?

http://jsfiddle.net/L7x9j/

If you have previously set the height to 55%, it could be that your stylesheet is being cached locally. Open the webpage in incognito, or even better clear your browser's cache to rule this out. — Jack, May 14 '14 at 20:23
I think your element should be floated first eigher to right or left. — scripter, May 14 '14 at 20:24
Though I don't know the answer to your question, I do know that `height: -webkit-height: calc(...);` is not valid CSS. I think you want `height: -webkit-calc(...);`. — Jordan Running, May 14 '14 at 20:26
@Jordan is right and the same goes for the -moz prefix too, it should be `height: -moz-calc(...);`. That being said, I doubt this is the problem as modern browsers support this rule without the vendor prefixes. — Jack, May 14 '14 at 20:28
In my code it's just like @Jordan pointed... SOrry, my bad! I just wrote wrong here. =s — PlayHardGoPro, May 14 '14 at 20:32
In which browser (and version) do you get the wrong result? And how did you check that the resulting height is `55%`? — t.niese, May 14 '14 at 20:33
Put your example in a jsfiddle to see the problem. With `height` and % values it's often a problem with the parent element. — pzin, May 14 '14 at 20:35
@PlayHardGoPro In the example, you explicityly set `calc(55%)`. Did you add the wrong jsFiddle? — Josh Crozier, May 14 '14 at 20:49
@JoshCrozier & t.niese. Geee, Let me explain... I'm using .Less to write my CSS, in my less document I wrote calc(100% - 45px) but in my .css file it's Calc(55%), may this be the cause of the error ? — PlayHardGoPro, May 14 '14 at 20:53
Well `calc(55%)` is not the same as `calc(100% - 45px)` so yes, _LESS_ is doing something the wrong way (without rendering the page you never can calculate the final result of `%-px`) or you did not carefully read the documentation if and where it is ok to write calculations in the less file. — t.niese, May 14 '14 at 21:01
possible duplicate of [Less Aggressive Compilation with CSS3 calc](http://stackoverflow.com/questions/11972084/less-aggressive-compilation-with-css3-calc) — Jordan Running, May 14 '14 at 21:18

score 10 · Answer 1 · answered Sep 05 '14 at 10:16

10

I had a same problem, Calc() was calculating wrong %age.

Keep strict math set to on.

height: ~"calc(100% - 50px)";

This fixed the issue for me.

answered Sep 05 '14 at 10:16

Aamir Shahzad

6,683
8
47
70

Josh Crozier · Accepted Answer · 2014-05-14T21:00:37.100

4

There is nothing wrong with calc(), it works. You just need to set a height of 100% for the body/html elements in order for it to work as desired.

Compare this example (without html, body { height:100%; }) to this fixed example.

html, body {
    height:100%;
}
#mid-content {
    width: 100%;
    height: calc(100% - 50px);
    height: -webkit-calc(100% - 50px);
    height: -moz-calc(100% - 50px);
    border:1px solid red;
}

Additionally, it's worth noting that the header is 50px, not 45px. I also added box-sizing:border-box in order to include borders/padding in the element's box model calculations.

You may notice that there is space at the bottom if the screen size is less than ~700px. That's because of the following:

#mid-content h1 {
    width: 300px;
    height: 250px;
    font-size: 58px;
    line-height: 1em;
    font-family:'Oswald', sans-serif;
    margin: 100px auto 70px auto;
    color: white;
}

Removal of the height/margin fixes it. (example)

edited May 14 '14 at 21:00

answered May 14 '14 at 20:54

Josh Crozier

233,099
56
391
304

I think the problem is with the .less file, isn't it? Or your answer is the reason to .less compiler set the calc(55%) ? – PlayHardGoPro May 14 '14 at 20:56
@PlayHardGoPro See the updated answer. Is that what you were after? – Josh Crozier May 14 '14 at 21:04
1

@JoshCrozier the problem is that the OP uses _LESS_ to create the final css file and that _LESS_ already produces the incorrect `calc(55%)`. – t.niese May 14 '14 at 21:05
@t.niese Right, but even if LESS produced the correct result, `calc(100% - 50px)`, it still wouldn't work as expected. Compare those examples I posted. – Josh Crozier May 14 '14 at 21:06
@t.niese is right. The .LESS is creating this Calc(55%). Guess i'll get back to pure .css file. =s – PlayHardGoPro May 14 '14 at 21:09
1

The LESS problem is solvable and has been answered several times before, e.g.: http://stackoverflow.com/questions/11972084/less-aggressive-compilation-with-css3-calc – Jordan Running May 14 '14 at 21:17
3

@PlayHardGoPro No, you can still use LESS. Use `height: ~"calc(100% - 50px)";` see: http://stackoverflow.com/questions/17904088/disable-less-css-overwriting-calc – Josh Crozier May 14 '14 at 21:17

Using CSS3 calc() function

2 Answers2