CSSで、画面幅・高さから一定の値を引く計算をさせたい

画面幅・高さに応じてwidth・heightを変える

heigtなら、ヘッダーとフッターの高さは固定、画面いっぱいの高さからその二つを引いた値をボディの高さとする方法。

例えば画面高さいっぱいから、300px引いた値をボディの高さとしたい時。
(ヘッダー・フッターのheightが共に150pxとか)

失敗

.hoge {
    height: 100% - 300px;
}

だと、「Incompatible units: 'px' and '%'.」とエラーが出る。
こういう時はcalcメソッドを使う。

成功

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

widthなら、サイドバーを引いた値をボディの幅にしたい時とかに使えそう。