三栏布局（两边固定中间高度自适应）

三栏布局在我们应用中经常看到，今天我们要完成的是一个两边高度固定，中间高度自适应的的布局。
HTML结构代码：

<div class="outer">
        <div class="left">
            flaot方法实现三列布局
            flaot方法实现三列布局
        </div>
        <div class="right">
            efwfwe
            fwwf
            fwefew
        </div>
        <div class="middle">
            <span>flaot方法实现三列布局</span>
            <span>flaot方法实现三列布局</span>
            <span>flaot方法实现三列布局</span>
            <span>flaot方法实现三列布局</span>
            <span>flaot方法实现三列布局</span>
            <span>flaot方法实现三列布局</span>
            <span>flaot方法实现三列布局</span>
            <span>flaot方法实现三列布局</span>
            <span>flaot方法实现三列布局</span>
            <span>flaot方法实现三列布局</span>
            <span>flaot方法实现三列布局</span>
            <span>flaot方法实现三列布局</span>
            <span>flaot方法实现三列布局</span>
            <span>flaot方法实现三列布局</span>
            <span>flaot方法实现三列布局</span>
            <span>flaot方法实现三列布局</span>
            <span>flaot方法实现三列布局</span>
            <span>flaot方法实现三列布局</span>
            <span>flaot方法实现三列布局</span>
            <span>flaot方法实现三列布局</span>
            <span>flaot方法实现三列布局</span>
            <span>flaot方法实现三列布局</span>
        </div>
    </div>

CSS样式：

        .outer{
            height: 100px;
            border: 1px solid #000;
        }

        .outer > div{
            /*height: 100px;*/
        }

        .left {
            float: left;
            width: 270px;
            background: blue;
            height: 100px;
        }

        .right {
            float: right;
            width: 270px;
            background: blue;
            height: 100px;
        }

        .middle {
            background: yellow;
            overflow: hidden;   /* 自适应的重点*/
        }