“圣杯”使用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的三列布局

回答

相关问题