CSS3、calc()を使えば、長さ、数量、角度などを計算式で指定することができる
幅や高さを指定する場合「パーセントからpxを引きたい」といったようなことができる夢のような呪文です。（大げさ）
実際に当サイトで使用しているCSSがこちら
CSS
- .l-body {
- display: -webkit-flex;
- display: flex;
- }
- .l-content {
- width: calc(100% – 240px – 1em);
- max-width: 780px;
- }
- .l-sidebar {
- width: 240px;
- }
サイドバーの領域は240px固定にし、メインのコンテンツエリアは画面サイズにもよりますが100%からサイドバーの領域とマージン分を引いたサイズになるように指定しています。
calc()内での計算には + – * / が使用できます。
calc()内でさらにcalc()を使用したり、（）を使用することもできます。
参考：Can I use