calc 函数可以在设定属性值时执行一些基本的运算，有以下运算符：

• + ：加
• - ：减
• * ：乘
• / ：除

$$warning

运算符前后应该有空格，不然 calc(20% -10px) 中会把 -10px 解析成负值，导致属性值失效。

$$

以下代码演示了一个侧边栏（菜单栏）宽度固定，内容区宽度占满剩下区域的实例。侧边栏设定了 100px， 而内容区用 calc(100% - 100px) 保证了自身宽度占满剩下的区域，而不论父元素的宽度是多少。

<div class="container">
    <span class="side">侧边栏</span><span class="content">内容区</span>
</div>
<style>
    .container {
        height: 200px;
        color: white;
        font-size: 26px;
    }
    .side {
        display: inline-block;
        width: 100px;
        height: 100%;
        background-color: teal;
    }
    .content {
        display: inline-block;
        width: calc(100% - 100px);
        height: 100%;
        background-color: pink;
    }
</style>

$$demo

<div class="container"> <span class="side">侧边栏</span><span class="content">内容区</span> </div> <style> .container { height: 200px; color: white; font-size: 26px; } .side { display: inline-block; width: 100px; height: 100%; background-color: teal; } .content { display: inline-block; width: calc(100% - 100px); height: 100%; background-color: pink; } </style>

$$