Tengo un problema con los divs de posición relativos en otro div.

Quiero hacer un div que es la posición en el centro horizontal de la pantalla y en este div quiero colocar otros 3 div con la misma altura. Pero todos ellos deben ser receptivos.

Una imagen dice más que palabras :)

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

El elemento blu es el HTML

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

La lima es aquella que div.(#zwrapper) Donde quiero añadir los tres divs rojos.

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

Los divs rojos hacen problemas. Todos los divs tienen una altura del 30%. El primero debe estar alineado hacia arriba y el tercero hacia abajo. El div medio con el id.#z2 Es el único que obtiene un margen de5%.

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

Mi idea fue colocar los 3 divs con una altura del 30% en la envoltura y darle a la media un margen (superior / inferior) del 5% para obtener una altura del 100%. Pero esto no funciona.

Si cambio el tamaño de la ventana en ancho, la altura de los divs rojos cambia aunque no cambie la altura.

Hago un violín para demostrar esto.http://jsfiddle.net/ELPJM/

Gracias por adelantado