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/

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
– Jordan Running, Commented May 14, 2014 at 20:26
In my code it's just like @Jordan pointed... SOrry, my bad! I just wrote wrong here. =s — PlayHardGoPro
– PlayHardGoPro, Commented May 14, 2014 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
– t.niese, Commented May 14, 2014 at 20:33
@PlayHardGoPro In the example, you explicityly set calc(55%). Did you add the wrong jsFiddle? — Josh Crozier
– Josh Crozier, Commented May 14, 2014 at 20:49
possible duplicate of Less Aggressive Compilation with CSS3 calc — Jordan Running
– Jordan Running, Commented May 14, 2014 at 21:18

Aamir Shahzad · Accepted Answer · 2014-09-05 10:16:37Z

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 5, 2014 at 10:16

Aamir Shahzad

6,8848 gold badges49 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Josh Crozier · Accepted Answer · 2014-05-14 21:00:37Z

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, 2014 at 21:00

answered May 14, 2014 at 20:54

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

7 Comments

PlayHardGoPro Over a year ago

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%) ?

Josh Crozier Over a year ago

@PlayHardGoPro See the updated answer. Is that what you were after?

t.niese Over a year ago

@JoshCrozier the problem is that the OP uses LESS to create the final css file and that LESS already produces the incorrect calc(55%).

Jordan Running Over a year ago

The LESS problem is solvable and has been answered several times before, e.g.: stackoverflow.com/questions/11972084/…

Josh Crozier Over a year ago

@PlayHardGoPro No, you can still use LESS. Use height: ~"calc(100% - 50px)"; see: stackoverflow.com/questions/17904088/…

|

Collectives™ on Stack Overflow

Using CSS3 calc() function

2 Answers 2

Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related