3 rows, 100% height layout, with flexbox - html

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>

Answer 2

I add my own accepted answer here, because it addresses other issues as well.
I noted that the usually suggested code has a problem with Android prior to 4.4.4. By better indagating > this and > this I found out that the problem is > this, even if Android is not mentioned on the affected browsers list. So, my solution was to add flex-shrink: 0 to the content:
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)
}
It's also good to assign some kind of flex property to header and footer. I noticed on Android 442 that otherwise the bg color was gone:
.main-header,
.main-footer{
flex: none; // or flex something.
}
Also please note that I'm using Autoprefixer. Otherwise, you should not use the shortcut on main-content (IE shit-fix):
.main-content{
flex-grow: 1;
flex-shrink:0;
flex-basis:auto;
}

Answer 3

Very similar to these question : this & this
You need only 3 lines of code:
display:flex;
flex-flow:column;
height:/* whatever height needed */
and then flex:1; to the container that needs to fill remaining space
* {
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>
there is no need to set heights to footer or header , but you might add overflow:auto to the main container.