Calculo Responsivo

Galera to com o seguinte problema...

Estou fazendo um app usando o phonegap e preciso criar 3 divs com tamanhos iguais que serão responsivos para diferente aparelhos, isso é pode usar em um tablet ou em um celular e o tamanho delas precisam ser proporcionais...

O que eu fiz.

Coloquei uma div principal com tamanho de 100%, dentro dela coloquei outras 3 divs que ao iniciar o aplicativo eu pego o tamanho da minha div principal e divido por 3, pela logica digamos assim seria o tamanho de cada uma..

O JS ficou assim então:

var alturaAtual = $$("#miolo").height();
 var topoMenu = $$("#topo-menu").height();

 console.log(alturaAtual);
 console.log(topoMenu);

 var totalHeight = parseInt((alturaAtual - topoMenu) / 3);
 console.log(totalHeight);
 $$('.menu-horizontal').attr("style","height: "+totalHeight + "px;");

Um dos problemas que eu percebi que a altura do "miolo" está sendo a tela do aparelha todo, isto é , o meu "topo-menu" está fora do miolo porém está sendo somado junto, no meu exemplo estou usando o iphone 5 para debug e nele a altura é 568 e o milo tecnicamente deveria ter 540 pois o topo-menu possui "height: 20px;", de qualquer maneira quando executo funciona em partes, mas o ultima div fica com o tamanho bem menor que as outras...

Para ilustrar melhor o resultado está sendo assim:

(Link https://uploaddeimagens.com.br/imagens/imagem_testes-png))

O meu html é este:

<div data-page="index" class="page">
 <div id="topo-menu" class="landing-header" align="center">
 <a class="landing-header-logo" href="#"><span class="color-red-dark">i</span>Logo</a>
 </div>
 <div id="miolo" class="" style="height: 100%;">

 <div class="bg-red-dark menu-horizontal" align="center">
 <br>
 <i class="fa fa-eye"></i>
 <div class="text-menu">
 <h2><a href="fiscalize.html" class="item-link">{Texto}</a></h2>
 { texto texto texto texto texto texto texto texto texto texto }
 </div>
 </div>

 <div class="bg-blue-dark menu-horizontal" align="center">
 <br>
 <i class="fa fa-pencil"></i>
 <div class="text-menu">
 <h2><a href="fiscalize.html" class="item-link">{Texto}</a></h2>
 { texto texto texto texto texto texto texto texto texto texto }
 </div>
 </div>

 <div class="bg-green-dark menu-horizontal" align="center">
 <br>
 <i class="fa fa-star-half-o"></i>
 <div class="text-menu">
 <h2><a href="fiscalize.html" class="item-link">{Texto}</a></h2>
 { texto texto texto texto texto texto texto texto texto texto }
 </div>
 </div>

 </div>

 </div>

Agradeço a ajuda.