calc()函数：动态计算长度值的函数，css3新增
    语法：calc(数学表达式)
    支持+、-、*、/运算，先算括号里面的
    注意：运算符前后添加空格
    兼容性IE9+
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      .wrap {
        background: yellow;
      }

      .wrap div {
        min-height: 200px;
      }

      .wrap .left {
        width: 200px;
        background: pink;

        float: left;
      }

      .wrap .center {
        background: #f0f;

        float: left;
        width: calc(100% - (200px + 300px));
      }

      .wrap .right {
        width: 300px;
        background: lightcoral;

        float: left;
      }
    </style>
  </head>
  <body>
    <!-- 使用calc()函数实现自适应三栏布局 -->
    <div class="wrap">
      <div class="left">left</div>
      <div class="center">中间内容</div>
      <div class="right">right</div>
    </div>
  </body>
</html>

calc方法三栏布局思路--小技巧_三栏布局