「聖盃」使用flexbox的三列布局

我試圖使用新的display: flex語法來實現一般被描述爲「聖盃」（參見ALA article）的三列布局。「聖盃」使用flexbox的三列布局

的要求如下：

頁眉和頁腳，它們之間的三列
外列具有固定寬度
內柱拉伸以填充邊柱之間的空間，最小和最大寬度超過它將不會伸展（因此容器也不應該）
頁腳應該位於視口的底部，直到內容實際上將其推到下面

我拿到了前三個要求來與下面的代碼：

<body> 
<div class="container"> 
    <header class="masthead"> 
    <h1>The Header</h1> 
    </header> 
    <div class="side-left column"> 
    Left sidebar 
    </div> 
    <div class="middle column">  
    Content goes here 
    </div> 
    <div class="side-right column"> 
    Right sidebar 
    </div> 
    <footer class="footer"> 
    &copy; Footer 
    </footer> 
</div> 
</body>

CSS：

.container { 
    display: flex; 
    flex-flow: row wrap; 
    min-width: 500px; 
    max-width: 1100px; 
} 
.masthead { 
    flex: 1 100%; 
} 
.side-left, 
.side-right { 
    flex: 0 0 150px; 
} 
.middle { 
    flex: 1; 
} 
.footer { 
    flex: 1 100%; 
}

活在行動：jsBin

不過，我堅持的100％的身高。我已經嘗試設置一些列或容器到height: 100%或min-height: 100%但似乎沒有工作。我是否需要許多其他flex屬性中的一個來處理這個問題？我似乎無法通過樹木看到森林。

來源

2014-09-19 Stephan Muller

你看到這一點：http://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/？ – 2014-09-19 12:19:13

哎呀，我確實看了看，但我想我忽略了這個明顯的答案。 – 2014-09-19 12:22:50

.container { min-height: 100vh; }

來源

2014-09-19 12:20:16 AdmireNL

'html，body {height：100％} .container {min-height：100％}'也可以。 – misterManSam 2014-12-02 06:58:54

「聖盃」使用flexbox的三列布局

回答

相關問題