calc() 函数用于动态计算长度值。

  • 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
  • 任何长度值都可以使用calc()函数进行计算；
  • calc()函数支持 "+", "-", "*", "/" 运算；
  • calc()函数使用标准的数学运算优先级规则；

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>demo</title> 
<style>
#div1, #div2 {
    display: inline-block;
    text-align: center;
}
#div1 {
    width: 150px;
    background: #ccc;
}
#div2 {
    width: calc(100% - 150px);
    background: #0ff;
}
</style>
</head>

<body>
<p>创建两个横向排列的div，第1个div固定宽度100px，第2个div宽度自动伸缩（可以调整浏览器窗口大小看看变化效果）：</p>
<div>
    <div id="div1">左边</div><div id="div2">右边</div>
</div>
</body>
</html>