第二个div高度随着父div高度改变而改变的几种实现方式

最近遇到这样一个需求，一个大的div高度不固定，里面有两个小的div，第一个div高度固定（比如为100px）,第二个div高度填满大div的剩余高度。实现也很简单，想到了好几种实现方式，记录一下。
因为外面大的div高度不固定，我在这里就默认填满body。
1、定位：外面大的div相对定位，第二个div绝对定位，设置top:100px。代码如下：outer设置overflow:hidden去掉滚动条。这种方法第二个div的高度和外面大的div的高度一样。

 <div class="outer">
        <div class="box1"></div>
        <div class="box2"></div>
 </div>
     <style>
        *{
            padding: 0;
            margin: 0;
        }
        html,body{
            height: 100%;
        }
        .outer{
            position: relative;
            width: 100%;
            height: 100%;
            overflow:hidden;
        }

        .box1{
            width: 100%;
            height: 100px;
            background: red;
        }
        .box2{
            position: absolute;
            top: 100px;
            left: 0px;
            bottom: 0px;
            height: 100%;
            width: 100%;
            background: blue;
        }
    </style>

2、设置边距：外面大的div设置上面的padding为100px(即第一个div的高度)，并且设置为怪异盒模型（box-sizing:border-box），第一个div设置上面的margin为-100px。代码如下：

   <div class="outer">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
        *{
            padding: 0;
            margin: 0;
        }
        html,body{
            height: 100%;
        }
        .outer{
            width: 100%;
            height: 100%;
            padding-top: 100px;
            box-sizing: border-box;
        }

        .box1{
            width: 100%;
            height: 100px;
            background: red;
            margin-top: -100px;
        }
        .box2{
            height: 100%;
            width: 100%;
            background: blue;
        }

3、采用弹性盒模型flex。直接上代码：

 *{
           padding: 0;
           margin: 0;
       }
       html,body{
           height: 100%;
       }
       .outer{
           display: flex;
           width: 100%;
           height: 100%;
          flex-direction: column;
       }

       .box1{
           width: 100%;
           height: 100px;
           background: red;
       }
       .box2{
           flex: 1;
           height: 100%;
           width: 100%;
           background: blue;
       }

4、利用css3的计算属性calc，第二个div的高度等于外面大的div高度减去100。

  *{
        padding: 0;
        margin: 0;
    }
    html,body{
        height: 100%;
    }
    .outer{
        width: 100%;
        height: 100%;
    }

    .box1{
        width: 100%;
        height: 100px;
        background: red;
    }
    .box2{
        height:calc(100% - 100px);
        width: 100%;
        background: blue;
    }