3行，100%高度布局，采用flexbox技术。

Question

我想知道：是否可以使用flexbox构建一个高度为100%，有3行的布局？

<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/

- Luca Reghellin

---

类似于这个的东西。 - DomeTune

@Michael_B 好的，谢谢你。我添加了自己的答案和适当的文档。 - Luca Reghellin

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>

- Michael Benjamin

Answer 2

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

我注意到通常建议的代码在Android 4.4.4之前存在问题。通过更好地调查>这个和>这个，我发现问题是>这个，即使在受影响的浏览器列表中没有提到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上注意到，否则背景颜色会消失：

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

请注意，我正在使用Autoprefixer。否则，请不要在主内容上使用快捷方式(IE狗屎修复)：

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

- Luca Reghellin

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。

- G-Cyrillus

---

@Stratboy，问题中有指定吗？IE也可以吗？ :) 你能在安卓上给我反馈一下吗？https://jsfiddle.net/10ohr6wy/9/（需要flex：1 1 auto;）IE - G-Cyrillus

由于该问题被阻止，我无法自己添加答案，因此我创建了另一个问题。无论如何，我在另一个线程中的答案更好，因为它解决了Android问题。所有这些都在我发布的外部链接中得到了记录，所以您可以参考那些链接。我只是写上面的评论是为了通知未来的人们，所以没有个人恩怨。祝你有美好的一天。 - Luca Reghellin

@Stratboy，好的，我没有看到其他涉及Android的问题:)。你有没有看一下我之前链接的关于它在Android上的表现的fiddle（关于这里的另一个问题，我只是想知道IE修复程序是否也适用于Android...还是有bug）？ - G-Cyrillus

嗯，抱歉我不是很理解。但无论如何，安卓的修复似乎与IE的修复相同。 - Luca Reghellin