Contenido usando todo el espacio disponible con jQuery Mobile

Tengo un proyecto con jQuery Mobile + phonegap y tengo algunos problemas con el pie de página y el contenido div.Contenido usando todo el espacio disponible con jQuery Mobile

una página básica jQuery Mobile tiene el siguiente aspecto:

<div data-role="page" data-theme="b" id="map"> 

    <div data-role="header" data-theme="b" data-position="inline"> 
     <a href="#" data-rel="back" data-icon="arrow-l">Back</a> 
     <h1>MAP</h1> 
    </div><!-- /header --> 

    <div data-role="content" id="map_canvas"> 
    </div><!-- /content --> 

    <div data-role="footer" data-theme="d"> 
     <h4>TEST</h4> 
    </div><!-- /footer --> 
</div><!-- /page -->

Ahora estoy tratando de cargar los mapas de Google en el contenido de lo que utilizar esto en JavaScript:

$('div').live("pageshow", function() 
{ 
    var myOptions = { 
     center: new google.maps.LatLng(-34.397, 150.644), 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 
}

y este es el resultado:

Page with footer after content

el problema es que el Foote r no se pega a la parte inferior, a menos que se especifique el atributo data-position="fixed" así:

<div data-role="footer" data-theme="d" data-position="fixed"> 
    <h4>TEST</h4> 
</div><!-- /footer -->

Eso está bien, pero el problema es el mapa está cargando antes de jQuery Mobile tomar el pie de página en la parte inferior, como resultado tengo este página:

Page with footer fixed

Donde se puede ver el mapa utilizando sólo el espacio que queda antes de que se trasladó a la parte inferior.

Mi pregunta es ... ¿qué evento debo esperar o qué necesito agregar a mi código para poder cargar el mapa y usar todo el espacio entre el encabezado y el pie de página?

Fuente

2012-02-28 SERPRO

No necesita esperar por un evento, debe establecer la altura del elemento .ui-content en algo alrededor de 100%.

Aquí es un método CSS puramente de lograr 100% altura para una pseudo-página jQuery Mobile:

/*make sure the viewport is 100% height*/ 
html, body { 
    height : 100%; 
} 

/*make the page element 100% height*/ 
#map-page { 
    height : 100%; 
} 

/*specify a height for the header so we can line-up the elements, the default is 40px*/ 
#map-page .ui-header { 
    height : 40px; 
} 

/*set the content to be full-width and height except it doesn't overlap the header or footer*/ 
#map-page .ui-content { 
    position : absolute; 
    top  : 40px; 
    right : 0; 
    bottom : 30px; 
    left  : 0; 
} 

/*absolutely position the footer to the bottom of the page*/ 
#map-page .ui-footer { 
    position : absolute; 
    bottom : 0; 
    left  : 0; 
    width : 100%; 
    height : 30px; 
}

que aquí hay una demostración: http://jsfiddle.net/jasper/J9uf5/2/

Fuente

2012-02-28 17:09:39 Jasper

Hola ... Gracias por su sugerencia. Si utilizo todo ese CSS, la aplicación se vuelve loca y no funciona correctamente ... pero si solo agrego esta parte: http://pastebin.com/JPUTjB0N funciona muy bien con jQuery Mobile ... Edite su respuesta para marcarla como correcto – SERPRO

Gracias por la solución. Estaba buscando esto por bastante tiempo. – WhatsInAName

Esta solución realmente me ayudó para jQM v1.2.0. ¡Gracias! – themanatuf

Este también funciona:

<html> 
<head> 
<meta name="viewport" id="viewport" 
    content="width=device-width, height=device-height, 
    initial-scale=1.0, maximum-scale=1.0, 
    user-scalable=no;" /> 
</head> 
<body> 
    .... 
    <div data-role="header" data-position="fixed"> 
    .... 
    <div data-role="footer" data-position="fixed"> 
    .... 
</body> 
</html>

Fuente

2013-02-22 20:36:16 sherif

Bueno ... como información adicional para los demás: En los navegadores compatibles con la posición CSS: fijo (la mayoría de los navegadores de escritorio, iOS5 +, Android 2.2+, BlackBerry 6 y otros), las barras de herramientas que utilizan el complemento "fixedtoolbar" serán se fija en la parte superior o inferior de la ventana gráfica, mientras que el contenido de la página se desplaza libremente en el medio. En navegadores que no admiten posicionamiento fijo, las barras de herramientas permanecerán posicionadas en flujo, en la parte superior o inferior de la página. Para habilitar este comportamiento en un encabezado o pie de página, agregue el atributo de posición de datos = "fijo" a un elemento de encabezado o pie de página de jQuery Mobile. – Badrush

Simplemente agregue este css:

<style> 
    #map{ 
     height: 0; 
    } 

    #map_canvas { 
     height: 100%; 
     padding: 0; 
     text-shadow: none; 
    } 
</style>

Fuente

2013-05-09 22:29:03

No entiendo por qué hacer que la altura del padre 0 y el niño deseado 100% lo haga funcionar, pero esto funciona muy bien. – dk123

Contenido usando todo el espacio disponible con jQuery Mobile

Respuesta

Cuestiones relacionadas