Mam problem z pozycją divs w innym div.

Chcę, aby div był pozycją w środkowej części ekranu, aw tym div chcę umieścić 3 inne div o tej samej wysokości. Ale wszystkie z nich powinny reagować.

Zdjęcie mówi więcej niż słowa :)

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

Elementem blu jest HTML

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

Wapno jest tym, co div(#zwrapper) gdzie chcę dodać trzy czerwone divy.

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

Czerwone divy sprawiają problemy. Wszystkie div mają wysokość 30%. Pierwszy powinien być wyrównany do góry, a trzeci do dołu. Środkowy div z identyfikatorem#z2 jest jedynym, który ma margines5%.

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

Moim pomysłem było umieszczenie 3 div z wysokością 30% w opakowaniu i nadanie środkowi marginesu (górny / dolny) o 5%, więc otrzymam wysokość 100%. Ale to nie działa.

Jeśli zmienię rozmiar okna na szerokość, wysokość czerwonych div zmienia się, chociaż nie zmieniam wysokości.

Robię skrzypce, żeby to pokazać.http://jsfiddle.net/ELPJM/

Z góry dziękuję