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/

Answer 1

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.

Answer 2

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)