如何拉伸一排柔性箱？

Question

我會參考這個例子：http://codepen.io/KenPowers/pen/CwoKc?editors=110

我希望的結果是（當屏幕寬度至少800px）擴展中間「行」，使標題在頂部和頁腳是在底端。我想這樣做而不添加任何HTML標記。

目前，例如呈現爲這樣：

添加以下代碼：

html, body { 
    width: 100%; 
    height: 100%; 
} 

結果如下所示：

最後，在設置0的footer和header喜歡的東西50px結果在以下幾點：

我怎樣才能讓這樣的中間線一直延伸到填充頁面上的所有空間？我覺得我已經嘗試了所有可能的組合align-content,align-items和align-self，但無濟於事。

Answer 1

我有一個解決方案，我認爲&希望它對你有幫助。

我利用了css3 reset from HTML5 doctor（只有必須部分），視口高度單元vh作爲高度單位和等高線與跨瀏覽器CSS列。跨瀏覽器CSS信息

高度相等列就是從這裏開始：http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

您可以查看和使用這裏的解決方案： http://jsbin.com/puvesila/1/edit

更新： 我嘗試沒有包裝，但我無法做到沒有他們。