css - icon - jquery mobile documentation
Contenido utilizando todo el espacio disponible con jQuery Mobile (3)
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>
Tengo un proyecto con jQuery Mobile + Phonegap y tengo algunos problemas con el pie de página y el contenido div.
Una página básica de jQuery Mobile se ve así:
<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 intentando cargar google maps en el contenido, así que lo uso 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:
El problema es que el pie de página no se pega al fondo a menos que especifiques el atributo data-position="fixed" como este:
<div data-role="footer" data-theme="d" data-position="fixed">
<h4>TEST</h4>
</div><!-- /footer -->
Está bien, pero el problema es que el mapa se está cargando antes de que jquery mobile tome el pie de página hacia abajo, como resultado tengo esta página:
Donde puedes ver el mapa solo usando el espacio que queda antes de moverlo a la parte inferior.
Mi pregunta es ... ¿qué evento debo esperar o qué debo agregar a mi código para cargar el mapa, así usará todo el espacio entre el encabezado y el pie de página?
No necesita esperar un evento, debe establecer la .ui-content elemento .ui-content en algo alrededor del 100% .
Aquí hay un método puramente CSS para alcanzar el 100% altura para una pseudopágina de 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;
}
Aquí hay una demostración: http://jsfiddle.net/jasper/J9uf5/2/
Solo agrega este css:
<style>
#map{
height: 0;
}
#map_canvas {
height: 100%;
padding: 0;
text-shadow: none;
}
</style>