css3动态计算 calc()

语法

calc() = calc(四则运算)
calc()函数支持 “+”, “-“, “*”, “/“ 运算；
calc()函数使用标准的数学运算优先级规则

注意：运算符前后要留一个空格
例如：height:calc(100% - 2.26rem)

浏览器支持

https://caniuse.com/#search=calc 主流浏览器现在都支持，在移动端使用不用担心。
为了兼容可以加上浏览器厂商前缀：

{
    -wekit-height:calc(100% - 2.26rem)；
    -mos-height:calc(100% - 2.26rem)；
    -ms-height:calc(100% - 2.26rem);
    height:calc(100% - 2.26rem)；
}

比如当我们不能确定具体高度，但是知道他比父级小的具体数值的时候用这个会很方便，当然，有时候我们也可以用定位解决此类问题，但是calc动态计算显然比定位要方便的多，因为定位一般会涉及到上级很多样式问题，有时候可能需要层层定位，还要涉及z-index等层级问题。