El encabezado y el pie de página se pueden posicionar de tres maneras:
- Inline - Por defecto. Los encabezados y pies de página están en línea con el contenido de la página.
- Fijo(Fixed): los encabezados y pies de página permanecerán en la parte superior e inferior de la página.
- Pantalla completa(Fullscreen) - Se comporta como fijo; los encabezados y pies de página se mantendrán en la parte superior e inferior, pero también sobre el contenido de la página. También es ligeramente transparente
Use el atributo de posición de datos para posicionar sus encabezados y pies de página:
Ejemplo: data-position="inline"
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="inline">
<h1>Encabezado Inline</h1>
</div>
<div data-role="main" class="ui-content">
<p><b>Tip:</b> Para ver el efecto, intente cambiar el tamaño de la ventana si la barra de desplazamiento no está disponible.</p>
<p>Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilite el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar desplazamiento ... algo de texto para habilitar el desplazamiento ... algo de texto para habilitar el desplazamiento ... algo de texto para habilitar el desplazamiento ... algo de texto t para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilite el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar desplazamiento </p>
</div>
<div data-role="footer" data-position="inline">
<h1>Pie de pagina Inline</h1>
</div> <!-- Cierre de footer-->
</div> <!-- Cierre de la pagina-->
</body>
</html>
Resultado: Inline
Resultado: Fixed
Nota: el encabezado y pie de pagina permanecen fijos
No hay comentarios:
Publicar un comentario