.foo {
height: calc(100% - 50px);
}
什么是calc()
calc是英文單詞calculate(計算)的縮寫督笆，calc()是css3的一個新增的功能，用來指定元素的長度诱贿。比如說娃肿，你可以使用calc()給元素的border、margin珠十、pading料扰、font-size和width等屬性設(shè)置動態(tài)值。為何說是動態(tài)值呢?因為我們使用的表達式來得到的值焙蹭。不過calc()最大的好處就是用在流體布局上晒杈，可以通過calc()計算得到元素的寬度。
calc()能做什么孔厉？
calc()能讓你給元素的做計算拯钻，你可以給一個div元素，使用百分比撰豺、em粪般、px和rem單位值計算出其寬度或者高度，比如說“width:calc(50% + 2em)”污桦，這樣一來你就不用考慮元素DIV的寬度值到底是多少亩歹，而把這個煩人的任務(wù)交由瀏覽器去計算。
calc()語法
calc()語法非常簡單凡橱，就像我們小時候?qū)W加 （+）小作、減（-）、乘（*）稼钩、除（/）一樣顾稀，使用數(shù)學(xué)表達式來表示：
.elm {
width: calc(expression);
}
//其中"expression"是一個表達式，用來計算長度的表達式坝撑。
calc()的運算規(guī)則
使用“+”静秆、“-”氮块、“” 和 “/”四則運算；
可以使用百分比诡宗、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）到現(xiàn)在還只是部分支持（不支持 vmax，同時 vm 代替 vmin）
大家在實際使用時豺鼻，同樣需要添加瀏覽器的前綴
.elm {
/*Firefox*/
-moz-calc(expression);
/*chrome safari*/
-webkit-calc(expression);
/*Standard */
calc();
}
移動設(shè)備
Android：自 4.4 版起就完美支持
iOS：自 iOS8 版起就完美支持
