javascript - 高さ: calc(100% - 100px) が機能しない理由

Question

テスト div の高さを calc(100%-100px) に設定しようとしています。なぜそれが機能していないのですか。

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

Answer 1

演算子+との-前後には空白が必要です。calc(100% - 100px).演算子を使用すると、*空白は必要ありません。calc(100%(1/15))

Answer 2

100% の代わりに 100vh を使用できます。vh = ビューポートの高さの 1%。

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

Answer 3

に複数のheightcss スタイルがあるのはなぜ#wrapですか?

離陸してみるheight: auto !important;

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

Answer 4

以下のコードは、以下のように div .div{height: calc(100% - (20px + 30px));} 作業コードの高さを修正するのに役立ちます:

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 コード:

<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>

実施例： http: //jsfiddle.net/UF3mb/603/