calc()関数を使用したCSS属性値の計算

現実的には、画面全体に対する全体的な高さや幅を動的に調整することがよくあります.
例えば、divの高さを画面全体の100%から20 pxの固定高さを減らしたいのですが、どうやって実現しますか?calc()関数で調整するのに適しています.使用方法

/*                20px*/
width:-webkit-calc(100% - 20px);
width:-moz-calc(100% - 20px);
width:calc(100% - 20px);

calcメソッドは、プラス(+)マイナス(-)乗(*)で(/)を除くことができます.

注意:乗算、乗数の少なくとも1つはnumberである.

注意:除算、除数(/右の数)はnumberでなければなりません.

コメント:

'+'と-演算子の両方に空白の文字が必要です.

'*'および/の2つの演算子の前後に空白文字は必要ありません.

0を0で除算するとHTML解析器から異常が放出されます.

は、自動レイアウトおよび固定レイアウトのテーブル内のテーブル列、テーブル列グループ、テーブル行、テーブル行グループ、およびテーブルセルの幅および高さのパーセントの数式に関し、autoは

として指定することができる.

calc()関数はネストをサポートしますが、ネストされたcalc()関数をすべて普通の括弧としてサポートします.△だから、関数内はそのままかっこでいいです.

参考ドキュメント:MDN web docs:https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc