JQuery-Mobile área de contenido 100% de altura entre la cabeza y el pie

Muchos temas sobre esto ... pero no entendiendo cómo hacerlo.JQuery-Mobile área de contenido 100% de altura entre la cabeza y el pie

Tengo mi encabezado y pie de página JQM. Quiero que el área de contenido llene el 100% de altura entre la cabeza y el pie.

Ese es mi código, ¿cómo es posible?

<body> 
     <div data-role="page" id="entryPage" data-theme="d"> 

     <div data-role="header" id="header" data-position="fixed" data-theme="d"> 
      <h1>Page Title</h1> 
     </div><!-- /header --> 

     <div data-role="content" id="content" data-theme="d"> 

      <div id="columnwrapper"> 
       <div id="leftcolumn"> 
        <div class="innertube"> 
         Point 1 
        </div> 
        <div class="innertube"> 
         Point 1 
        </div> 
       </div> 
      </div> 

      <div id="rightcolumn"> 
       <div class="innertube"> 
        <div id="switch1"> 
         test 
        </div> 
       </div> 
       <div class="innertube"> 
        test2 
       </div> 

      </div> 

      <div id="contentcolumn"> 
       <div class="innertube">Content</div> 
       <div class="innertube">Content</div> 
      </div> 

     </div><!-- /content --> 
     <div data-role="footer" id="footer" data-position="fixed" data-theme="d"> 

      <div id="switch2"> 
       <a href="#foo" data-role="button" data-icon="arrow-u">Expand main menu</a> 
      </div> 

     </div><!-- /footer --> 
    </div><!-- /page --> 
</body>

CSS:

#columnwrapper{ 
    float: left; 
    width: 100%; 
    margin-left: -75%; /*Set left margin to -(contentcolumnWidth)*/ 
    background-color: #C8FC98; 

} 

#leftcolumn{ 
    margin: 0 40px 0 75%; /*Set margin to 0 (rightcolumnWidth) 0 (contentcolumnWidth)*/ 
    background: #C8FC98; 
} 

#rightcolumn{ 
    float: left; 
    width: 40px; /*Width of right column*/ 
    margin-left: -40px; /*Set left margin to -(RightColumnWidth)*/ 
    background: yellowgreen; 
} 

#contentcolumn{ 
    float: left; 
    width: 75%; /*Width of content column*/ 
    background-color: blue; 
} 

.innertube{ 
    margin: 0px; /*Margins for inner DIV inside each column (to provide padding)*/ 
    margin-top: 0; 

}

En realidad, el área interior sólo llena la altura en función del contenido ... significa 2 divs 2 filas, pero no al 100% ..

Gracias

Fuente

2011-09-16 zyrex

no use jquery css, no es bueno, necesita su propio pie de página que se establezca en posición fija, desbordamiento; automático, y abajo: 0 y luego uno para su cabeza pegará código en un mínimo – davethecoder

El CSS position: fixed no funciona correctamente en navegadores móviles. Mi experiencia es con los navegadores Android e iOS y ninguno de ellos implica position: fixed correctamente (la excepción es el navegador iOS 5 pero aún está en versión beta).

En lugar de fijar un elemento a la pantalla y no moverlo cuando el usuario se desplaza en los navegadores móviles, tiende a tratarse como position: absolute y se mueve cuando la página se desplaza.

También el uso de la propiedad CSS overflow no permitirá el desplazamiento en la mayoría de los dispositivos móviles (iOS lo admite pero el usuario tiene que saber usar dos dedos mientras se desplaza en una función desplazable div).

Sin embargo, puede utilizar CSS, pero tenga en cuenta que necesitará usar position: absolute o puede usar JavaScript para establecer las alturas de los elementos.

Aquí es una solución jQuery Mobile utilizando JavaScript para establecer las alturas de los elementos pseudo-Página

$(document).delegate('#page_name', 'pageshow', function() { 
    var the_height = ($(window).height() - $(this).find('[data-role="header"]').height() - $(this).find('[data-role="footer"]').height()); 
    $(this).height($(window).height()).find('[data-role="content"]').height(the_height); 
});

Para conseguir un acabado impecable es necesario tomar en consideración el comportamiento de la barra de direcciones del dispositivo de destino, porque si desea una página web a pantalla completa, debe agregar la altura de la barra de direcciones a la altura de la página.

Fuente

2011-09-16 19:33:44 Jasper

Actualmente está haciendo un poco demasiado, el pie de página está siempre por debajo del área visible .. ¿sabes por qué? – zyrex

Parece ignorar la barra de estado, si también descansa la altura de la barra de estado de Android, parece más o menos – Daniel

@zyrex toolbars 'outerHeight()' se debe considerar además de la altura actual de _content_ div. http://stackoverflow.com/a/21553307/1771795 – Omar

la CSS:

footer { 
      display: block; 
      position: fixed; 
      left: 0; 
      bottom: 0; 
      right: 0; 
      height: 50px; 
      background-color: #333; 
      overflow: hidden; 
      z-index:1000; 
      -webkit-transform: translateZ(0); 
      opacity:.9; 
     } 

    header{ 
     display:block; 
     position: fixed; 
     left:0; 
     right:0; 
     top:0; 
     height:50px; 
     overflow: hidden; 
    } 

    section{ 
     display:block; 
     position:fixed; 
     left:0; 
     top:50px; 
     bottom:50px; 
     right:0; 
     overflow-y: auto; 
    } 

    nav{ 
     display:block; 
     height:100%; 
     -webkit-backface-visibility: hidden; 
    } 

    .body{ 
     overflow-y: hidden; 
    } 
    .bar { 
border: 1px solid  #2A2A2A; 
background:    #111111; 
color:     #ffffff; 
font-weight: bold; 
text-shadow: 0 -1px 1px #000000; 
background-image: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#111)); /* Saf4+, Chrome */ 
background-image: -webkit-linear-gradient(top, #3c3c3c, #111); /* Chrome 10+, Saf5.1+ */ 
background-image: -moz-linear-gradient(top, #3c3c3c, #111); /* FF3.6 */ 
background-image:  -ms-linear-gradient(top, #3c3c3c, #111); /* IE10 */ 
background-image:  -o-linear-gradient(top, #3c3c3c, #111); /* Opera 11.10+ */ 
background-image:   linear-gradient(top, #3c3c3c, #111); 
    }

el único código HTML necesario:

<header class="bar" id="AllHead"></header> 

    <div data-role="content" class="content" id="home"><section><nav></nav></section></div><!-- /content --> 

    <footer class="bar" id="allFoot"></footer> 

</div><!-- /page -->

se pueden establecer cualquier elemento que desee en el interior del pie de página y la barra de navegación inferior esto siempre se verá bien, no importa lo que pase, también esta costumbre flash en y cada vez que tocas algo. Espero que ayude

Fuente

2011-09-16 16:38:14 davethecoder

arg, esto no es trabajando en safari (ipad) ... ya no puedes desplazarte, ¿sabes algo de ayuda? gracias – zyrex

Gracias, Jasper! Eso me ayudó mucho.

Tuve que perder mucho tiempo para hacer que esto funcione con múltiples encabezados/pies de página, y para dar cuenta de la barra de direcciones en ios. Pensé que compartiría mi solución para cualquier otra persona que tenga este problema. Esto me funciona hasta ahora en el simulador ios, pero estaría ansioso por saber cómo funciona en otros dispositivos.

/* detect device */ 
var ua = navigator.userAgent, 
    iphone = ~ua.indexOf('iPhone') || ~ua.indexOf('iPod'), 
    ipad = ~ua.indexOf('iPad'), 
    ios = iphone || ipad, 
    android = ~ua.indexOf('Android'); 


$(document).delegate('#the_page', 'pageshow', function() { 
    var $page = $(this), 
     $target = $(this).find('.fullHeight'), 
     t_padding = parseInt($target.css('padding-top')) 
        + parseInt($target.css('padding-bottom')), 
     w_height = (ios)? screen.height-65: $(window).height();  // "-65" is to compensate for url bar. Any better ideas? 
     headFootHeight = 0; 

    // Get total height for all headers and footers on page 
    $page.find('[data-role="footer"], [data-role="header"]').each(function() { 
     var myTotalHeight = $(this).height() 
          + parseInt($(this).css('padding-top')) 
          + parseInt($(this).css('padding-bottom')); 
     headFootHeight += myTotalHeight; 
    }); 

    var the_height = (w_height - headFootHeight);   

    $page 
    .height(w_height) 
    .find('.fullHeight') 
    .height(the_height - t_padding); 
});

Este script está estableciendo una altura de 100% en '.fullHeight', en lugar de [data-role = contenido] para dar más flexibilidad, pero se puede simplemente añadir la clase fullheight a su [data-role = contenido] elemento.

Un problema que sigo teniendo es la compensación de la barra de URL en iOS y la búsqueda de una altura de ventana que funcione en todos los dispositivos. Alguna idea sobre eso?

Fuente

2012-02-05 15:05:12 eschwartz

'+ 1' Funcionó como un amuleto ... muchas gracias. Salvaste mi día. – thesummersign

@geekay_gk - ¿Esto también configurará automáticamente la altura del contenido cuando uso un navegador web? Porque en mi caso, toda la página tiene una barra de desplazamiento, y lo que necesito es una pantalla completa de Google Maps dentro del div de contenido. Es realmente difícil trabajar con aplicaciones móviles cuando no tengo la mía. – JetPro

Lo he probado en mi emulador de Android. Realmente no se ajusta a mi resolución de pantalla. ¿Ayuda? – JetPro

JQuery-Mobile área de contenido 100% de altura entre la cabeza y el pie

Respuesta

Cuestiones relacionadas