Using CSS3 calc () Function

Question

I am trying to use a function calc(), but it returns the wrong value.

I use this:

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

.. but he sets the height to 55% . What for? What am I doing wrong here?

http://jsfiddle.net/L7x9j/

Answer 1

There is nothing wrong with calc()it working. You just need to set the height 100%for the body/ elements htmlto make it 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;
} 

, , header 50px, 45px. box-sizing:border-box / .

, , ~700px. - :

#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;
}

height/margin . ()

Answer 2

, Calc() % age.

, on.

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

.