在整個佈局頂部拉伸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>