div的流体布局横跨整个布局的顶部

Question

我有一个流畅的布局，右边和左边有两个div，在调整页面大小时有弹性，中心div有最大宽度和最小宽度。

有没有人知道如何在整个页面上进行div拉伸，这是在当前布局之上（在顶部）？请使用jsFiddle example - 我希望延伸的div成为具有背景的固定标题。

<style>
    html, body {
        height: 100%;
        font-family: 'Arial', 'Helvetica', Sans-Serif;
    }
    .container {
        display: table;
        width: 100%;
        height: 100%;
    }
    .container > div {
        display: table-cell;
        text-align: center;
    }
    .fixed {
        min-width: 200px; 
        max-width:300px;
        background: rgb(34, 177, 77);
        color: white;
    }
    .fluid {
        background: rgb(0, 162, 232);
    }
</style>

<div class="container">
    <div class="fluid">
        I'm 150px wide! Glee is awesome!
    </div>
    <div class="fixed">
        I'm fluid! Glee is awesome!
    </div>
    <div class="fluid">        
        I'm 150px wide! Glee is awesome!
    </div>
</div>