在整个布局顶部拉伸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> 

Answer 1

您只需在<div class="container">以上添加div即可。如果你不应用任何样式，它已经伸展到全宽。所以：

<style> 
    html, body { 
     height: 100%; 
     font-family: 'Arial', 'Helvetica', Sans-Serif; 
    } 
    .header { 
     background: red; 
    } 
    .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="header"> 
    I'm a header! Hooray! 
</div> 
<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>