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

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

 The header content goes here. 
 The main content goes here. 

固定高度的页眉和页脚,同时满足液体部分.

我的意思是,这样的事情,但没有绝对的定位:

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

The header content goes here.

The main content goes here.

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;
}

The header content goes here.
The main content goes here.