css3高度计算函数cal_css函数calc()的使用

calc函数四则运算

calc函数是css中提供的一个用来计算属性值，通过calc函数我们可以设置诸如width，height等一系列属性的值。换句话说，calc函数把一些简单的js计算挪到了css中了，把布局运算交给了浏览器，减少了js的负担。

calc函数可以通过 +,-,*,/ 四则运算，下面我们看一个高度的例子：height:calc(100% - 50px);

这里需要注意一下，calc计算+，-的时候，一定要在+，-号两边添加一个空格，不然的话会是无效的。虽然 *，/ 计算两边不需要添加空格，但是为了统一，也为了能养成习惯，避免出错，我们要在四则运算时运算符两边都要添加空格。

calc运算的乘法中必须要有一个值是整数，除法运算中被除数必须是整数，不然的话也会无效。

calc的好处就是不同单位之间可以互相运算，百分比，像素，em，rem等是可以掺杂运算的。

calc函数的使用例子

calc运算要结合实际应用才能发挥其作用。

比如有上面这么一个div，.cont{margin:25px;padding:20px;box-sizing:border-box;border:1px solid #bababa;}

那么，我们要想让这个div跟浏览器的高度一样高的话，那么我们可以通过calc进行计算。html,body{height:100%;}

body{

margin:0;

padding:0;

background:#f1f1f1;

overflow: hidden;

}

.cont{

margin:25px;

background:#fff;

box-sizing: border-box;

padding:20px;

border:1px solid #bababa;

height:calc(100% - 50px);

}

通过上述代码，我们就可以实现自适应浏览器高度的div，不过这里body的overflow:hidden是必须的，不然的话下面会多出一块空白，具体原因不祥，猜测是因为body是自适应增长的导致的。

我们在实际应用中，经常碰到这类场景，这是个列表页，或者文章页。但是如果列表不足或者文章内容不够，那么页面的页尾会跑上去，这不符合我们的预期，这时候我们就可以使用上面的calc运算的代码，只需要改成min-height就可以了。min-height:calc(100% - 50px);

添加了calc运算的属性后，就能达到我们预期的效果了。

在没有calc函数的时候，我们要想达到这种效果，只能是使用js进行计算。而随着现代浏览器的普及，以及calc的兼容性，我们可以采用calc来实现这个效果了。

calc的兼容性也不错，如下：

可以看到IE9以上就支持了，所以支持性还是非常乐观的。

上面的calc也是我发现的一个用途，如果你有更好的用途，请在下面留言。