alla fine ho seguito un approccio misto, ovvero che l'area del content sia come minimo alta quanto il viewport meno gli 80px del div sottostante.
Niente float o posizionamenti, ho usato i flexbox che mi sembrano più adatti allo scopo.
http://codepen.io/anon/pen/yMzWKz?editors=1100
Nel codice ho anche inserito un lungo lorem ipsum commentato. Decommentalo per capire se il comportamento è quello desiderato. Verifica anche se il comportamento responsive va bene alzando/abbassando la finestra dell'output
Markup
codice:
<div class="wrap">
<div class="wrap__leftcol">
Colonna sinistra
</div>
<div class="wrap__main">
<div class="wrap__content">
content
<!--
<p>
Lorem ipsum dolor sit amet, ...
</p>
-->
</div>
<div class="wrap__footer">
footer
</div>
</div>
</div>
CSS
codice:
* {
box-sizing: border-box;
}
.wrap {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
height: 100%;
font: .8rem Roboto;
box-sizing: border-box;
}
.wrap div { padding: 2px; }
.wrap__leftcol {
width: 50px;
margin-right: 10px;
align-self: flex-start;
}
.wrap__main, .wrap__content {
flex: 1;
}
.wrap__content {
min-height: calc(100vh - 88px); // regola l'altezza minima dopo aver rimosso bordi e padding
}
.wrap__footer {
height: 80px;
}