CSS3的calc()函数在布局中的使用

使用背景

目前有以下情况，一个页面Layout，包含定高的Header和Footer，以及靠内容自适应撑开的Content部分。要求Footer处于页面底部，且不使用position: fix;固定于底部。

初始方案

在React中，通过state值去动态设置页面视口高度。

this.setState({
    height: document.documentElement.clientHeight
});

<div style={{ height: this.state.height }}>
    { content }
</div>

但是这样会造成一个后果，当页面由小屏幕切换至大屏幕时，setState虽然会带来render的重新渲染，但该行为并不会随着屏幕的大小而重新渲染，因此，该过程中会产生底部的白色区域。

第二种方案

考虑到上述方案会产生一个白色到底部条，不利于页面美观，虽然再次刷新会使得该问题解决，但总归是不方便的，不利于用户体验的。于是，采用了媒体查询来改善以上问题。通过查询页面的高度，来设置不同的样式以满足需求。

@media screen and (max-height: 780px) {
    body {
        background-color:lightblue;
    }
}
@media screen and (min-height: 800px) {
    body {
        background-color: red;
    }
}

某方面来说，这样确实是能解决以上问题。但是，媒体查询的结果随着查询尺寸变化。查询尺寸设置的密集，即考虑到更多数屏幕适配情况，页面产生的遗留问题将会更少。正因为如此，当查询尺寸设置较少，问题则会持续暴露，这时候也是不利于用户体验的。

最终方案

由于前两种解决方案不断的暴露问题，因此这里使用CSS3的计算属性calc()来进行计算。calc()函数可以用来对数值属性执行四则运算。

.content {
    min-height: calc(100vh - 128px);
}

这里同时要注意兼容性问题。

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

注意事项

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

写代码过程中才过的坑，我踩过，希望你别踩～祝君安好。