CSS 3のcall()長さ計算

CSS 3にcalc()方法を導入し、様々な長さを四則演算することができる.計算の結果を元素の大きさに設定すると、ウインドウサイズが変わるたびにJavaScriptで計算するより便利です.例えば、このような三段配置が必要です.中間幅は40 pxと固定されています.両側の幅はそれぞれ他の幅の半分を占めています.非常に容易で直感的な(効果を表示)方法をcancで処理する.

html, body {

  height: 100%;

}



#left, #right {

  width: -moz-calc(50% - 20px);

  width: -webkit-calc(50% - 20px);

  width: calc(50% - 20px);

  float: left;

  height: 100%;

}



#middle {

  width: 40px;

  float: left;

  height: 100%;

}

このcalc()方法は、主流ブラウザのFirefox 4,IE 9,Chrome 19およびSafari 5.2からサポートされている.ここで、IEはプレフィックスを使用していない.Firefoxは−mozプレフィックスを使用し、ChromeおよびSafariは−webkitプレフィックスを使用する.
参考資料:[1]  Mathematical Expressions:‘canc()’[2]  Firefox 4：CSS 3 canc（）[3]  calc-MDN[4]  CSS：Firefox 4はCSS 3 calc方法をサポートします。[5]  When can I use cac()as CSS unit value？