Calculo Responsivo

[CrazyLOL 2]

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.