Eu tenho um problema com a posição divs relativa em um outro div.

Eu quero fazer um div que é a posição no meio horizontal da tela e neste div eu quero colocar outras 3 div com a mesma altura. Mas todos eles devem ser responsivos.

Uma foto diz mais que palavras :)

<div id="zwrapper">
 <div id="z1" class="row"></div>
 <div id="z2" class="row"></div>
 <div id="z3" class="row"></div>
</div>

O elemento blu é o HTML

html{
  background: steelblue;
  height: 100%;
  width: 100%;
  top:0; left:0; bottom: 0; right:0;
}

O limão é um que div(#zwrapper) onde eu quero adicionar os três divs vermelhos.

#zwrapper{
  height: 81%;
  top: 10%;
  width: 100%;
  left: 0;
  position: absolute;
  background: lime;
}

Os divs vermelhos causam problemas. Todos os divs têm uma altura de 30%. O primeiro deve estar alinhado ao topo e o terceiro ao inferior. O div central com o id#z2 é o único que obtém uma margem de5%.

.row{
  position: relative;
  width: 80%;
  background: red;
  height: 30%;
 }
 #z2{
  margin: 5% 0;
 }

Minha idéia era colocar os 3 divs com uma altura de 30% no wrapper e dar ao meio uma margem (top / bottom) de 5%, então eu tenho uma altura de 100%. Mas isso não funciona.

Se eu redimensionar a janela em largura, a altura das divs vermelhas mudará, embora eu não mude a altura.

Eu faço um violino para demonstrar isso.http://jsfiddle.net/ELPJM/

desde já, obrigado