3 行，100% 高度布局，带有 flexbox

Question

我想知道：是否可以使用 flexbox 构建 3 行布局、100% 高度？

<header> The header content goes here. </header>
<div class="content"> The main content goes here. </div>
<footer> The footer content goes here. </footer>

固定高度的页眉和页脚，而内容是液体部分。

我的意思是，像这样但没有绝对定位：

* {
  margin: 0;
}
header {
  position: absolute;
  width: 100%;
  height: 64px;
  top: 0;
  background: red;
}
footer {
  position: absolute;
  width: 100%;
  height: 64px;
  bottom: 0;
  background: green;
}
.content {
  position: absolute;
  width: 100%;
  top: 64px;
  bottom: 64px;
  background: blue;
}

<header>The header content goes here.</header>

<div class="content">The main content goes here.</div>

<footer>The footer content goes here.</footer>

http://jsfiddle.net/BMxzn/

Answer 1

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.content {
  flex: 1;     /* this is the key; consumes all available height */
  background: blue;
}
header {
  height: 64px;
  background: red;
}
footer {
  height: 64px;
  background: green;
}
* {
  margin: 0;
}

<header>The header content goes here.</header>
<div class="content">The main content goes here.</div>
<footer>The footer content goes here.</footer>

Answer 2

我在这里添加我自己接受的答案，因为它也解决了其他问题。

我注意到通常建议的代码在 4.4.4 之前的 Android 中存在问题。通过更好地了解 > this 和 > this，我发现问题是 > this，即使 Android 上没有提到受影响的浏览器列表。所以，我的解决方案是在内容中添加 flex-shrink: 0：

body{
  display: flex;
  flex-direction: column;
  height: 100%;
}

.main-content{
  flex: 1 0 auto; // flex-shrink:0 > android 4.4.2 fix (and some other browsers too)
}

为页眉和页脚分配某种 flex 属性也很好。我注意到在 Android 442 上，否则 bg 颜色消失了：

.main-header,
.main-footer{
    flex: none; // or flex something.
}

另外请注意，我使用的是 Autoprefixer。否则，您不应该在主要内容上使用快捷方式（IE shit-fix）：

.main-content{
  flex-grow: 1;
  flex-shrink:0;
  flex-basis:auto;
}

Answer 3

与这些问题非常相似：this & this

你只需要 3 行代码：

display:flex;
flex-flow:column;
height:/* whatever height needed */

然后flex:1;到需要填充剩余空间的容器

* {
  margin: 0;
}
body {
  display: flex;
  flex-flow: column;
  height: 100vh;/* if you relay on flex, then vh is also understood */
}
body>* {
  padding: 1em;
}
header {
  background: red;
}
footer {
  background: green;
}
.content {
  flex: 1;
  background: blue;
  color: white;
  /* optionnal if you want to keep footer at screen 
  overflow:auto; */
}

<header>The header <b>of any height</b> content goes here.</header>

<div class="content">The main content goes here.</div>

<footer>The footer <b>of any height</b> content goes here.</footer>

无需为页脚或页眉设置高度，但您可以在主容器中添加overflow:auto。