css3 的 calc()函數在布局中的使用----頭部高度固定，頁面正好占滿一屏

 最近項目遇到一個布局需求，頭部高度固定，頁面需要剛好占滿一屏幕。

如下示意圖：

 

 

 方法：使用calc

.wrap{
    position: relative;
    margin-left: 24px;
    margin-right: 24px;
    min-height: calc(100% - 123px);
}

calc()說明：

css3 的 calc()函數。這里的意思是設置寬度比100%的寬度少20px。
calc()函數用於動態計算長度值。
calc()函數支持 "+", "-", "*", "/" 運算；
calc()函數使用標准的數學運算優先級規則；

特別注意：

這里是指高度100%的基礎上減去123像素

- 號兩邊要有空格，否則不會生效。