3 rows, 100% height layout, with flexbox

Question

I'd like to know: is it possible to build a 3 rows layout, 100% height, with flexbox?

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

fixed-height header and footer, while content the liquid part.

I mean, something like this but without absolute positioning:

* {
  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>