CSSでcalc（）関数がどのように機能しますか？

私のCSSにcalc()を使用しようとしています。私は2つのdivを持つシンプルなフィドルを作成しました。 1つは、calc()を使用するスタイルのクラスを持っています。しかし、何の効果もありません。 Divの身長は変わらない。助けのためのCSSでcalc（）関数がどのように機能しますか？

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

<div class="cont" style="background-color:blue">fsdfds</div> 
 
<div style="background-color:red">1234</div>

感謝。

2017-03-29 Mark

可能な重複div？]（http://stackoverflow.com/questions/31728022/why-is-percentage-height-not-working-on-my-div） – 4castle

'html、body {height：100％;}を追加します。 } 'をCSSに送信します。詳細については、Michael_Bの答えのリンクを参照してください。このCSSを追加すると、％heightを使用する他の要素に影響する可能性があることに注意してください。 – john

はい、ありがとうございます。今働いている。 – Mark

calc()機能は正常に機能しています。

それはのパーセンテージの高さを理解する必要があります。

要素のパーセンテージの高さを操作するには、子が絶対配置されていない限り、高さが定義されている必要があります。ここで

は、詳細な説明とポストです：ここで

は、ピクセルの高さであなたのフィドルのデモではなくです：[なぜ率の高さは私には動作しないのhttp://jsfiddle.net/UF3mb/697/

2017-03-29 02:06:45

答えて