CSS3 的 calc() 长度计算

在 CSS3 中引入了一个 calc() 方法，可以对各种长度作四则运算。如果将计算的结果设定为元素的大小，将比每次窗口大小改变时用 JavaScript 来计算方便很多。例如我们需要这样的三栏布局：中间宽度固定为 40px，两边宽度各占其它宽度的一半。用 calc() 方法来处理非常容易和直观（查看效果）：

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: ‘calc()’
[2] Firefox 4: CSS3 calc()
[3] calc - MDN
[4] CSS:Firefox 4 将支持CSS3 calc方法
[5] When can I use calc() as CSS unit value?