css3 calc()

.foo {
    height: calc(100% - 50px);
}

什么是calc()

calc是英文单词calculate(计算)的缩写，calc()是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。

calc()能做什么？

calc()能让你给元素的做计算，你可以给一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度，比如说“width:calc(50% + 2em)”，这样一来你就不用考虑元素DIV的宽度值到底是多少，而把这个烦人的任务交由浏览器去计算。

calc()语法

calc()语法非常简单，就像我们小时候学加 （+）、减（-）、乘（*）、除（/）一样，使用数学表达式来表示：

.elm {
  width: calc(expression);
}
//其中"expression"是一个表达式，用来计算长度的表达式。

calc()的运算规则

使用“+”、“-”、“” 和 “/”四则运算；
可以使用百分比、px、em、rem等单位；
可以混合使用各种单位进行计算；
表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；
表达式中有“”和“/”时，其前后可以没有空格，但建议留有空格。

运算百分比

除了基本的px，%，em等，还有：
vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
vh：视窗高度的百分比
vmin：当前 vw 和 vh 中较小的一个值
vmax：当前 vw 和 vh 中较大的一个值

兼容性：

桌面 PC
Chrome：自 26 版起就完美支持
Firefox：自 19 版起就完美支持
Safari：自 6.1 版起就完美支持
Opera：自 15 版起就完美支持
IE：自 IE10 起（包括 Edge）到现在还只是部分支持（不支持 vmax，同时 vm 代替 vmin）
大家在实际使用时，同样需要添加浏览器的前缀

 .elm {
    /*Firefox*/
    -moz-calc(expression);
    /*chrome safari*/
    -webkit-calc(expression);
    /*Standard */
    calc();
 }

移动设备
Android：自 4.4 版起就完美支持
iOS：自 iOS8 版起就完美支持