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像素

- 号两边要有空格，否则不会生效。