calc関数

関数calcは、 CSSプロパティの値の計算を可能にします。 この関数はパラメータとして数学式を受け取り、 その計算結果をCSSプロパティの値として使用できます。 式には+、-、*、/の演算子を含めることができます。

構文

cssセレクタ {
  プロパティ: calc(式);
}

例

ブロックの幅を親要素の幅の100%から 50pxを引いた値にしてみましょう：

html<div id="parent">
  <div id="child"></div>
</div>

css#child {
  width: calc(100% - 50px);
  height: 100px;
  margin: 0 auto;
  border: 1px solid red;
}
#parent {
  border: 1px solid green;
}

Результат:

関連項目