为什么身高：calc（100％ - 100px）不起作用

Question

JsFiddle I am trying to set height of the test div as calc(100%-100px). why it is not working.

.test {
  height: calc(100%-100px);
 }

Answer 1

The operators + and - require whitespace before and after. Try calc(100% - 100px). With the * operator you don't need whitespace ex. calc(100%(1/15))

Answer 2

you can use 100vh instead 100%. vh = 1% of the height of the viewport.

.test {
  height: calc(100vh - 100px);
}

Answer 3

Why are there multiple height css styles for #wrap ?

Try taking off height: auto !important;

http://jsfiddle.net/UaYfW/53/

Answer 4

below code will help you to fix the height the div .div{height: calc(100% - (20px + 30px));} working code as below :

html,body {
    background: blue;
    height:100%;
    padding:0;
    margin:0;
}
header {
    background: red;
    height: 20px;
    width:100%
}
h1 {
    font-size:1.2em;
    margin:0;
    padding:0;
    height: 30px;
    font-weight: bold;
    background:yellow
}
#theCalcDiv {
    background:green;
    height: -moz-calc(100% - (20px + 30px));
    height: -webkit-calc(100% - (20px + 30px));
    height: calc(100% - (20px + 30px));
    display:block
}

html code :

<header>Some nav stuff here</header>

<h1>This is the heading</h1>

<div id="theCalcDiv">This blocks needs to have a CSS calc() height of 100% - the height of the other elements.</div>

Working Example : http://jsfiddle.net/UF3mb/603/