css - examples - jquery mobile online

jQuery Mobile: pegue el pie de página en la parte inferior de la página

Question

¿Hay alguna manera, teniendo en cuenta la forma en que funciona el framework jQuery Mobile, de arreglar la página para que el pie de página siempre se alinee con la parte inferior de la página, sin importar la altura?

Tal como está, la altura de una página de jQuery cambiará, especialmente a medida que los dispositivos se roten de vertical a horizontal, por lo que la solución debería tener esto en cuenta.

Solo para aclarar: no necesito que el pie de página esté en la parte inferior de la ventana gráfica, solo funciona para que la altura de la página predeterminada no caiga por debajo del alto de la ventana gráfica.

Gracias.

Answer 1

http://view.jquerymobile.com/master/demos/toolbar-fixed/

Para habilitar este comportamiento en un encabezado o pie de página, agregue el atributo de data-position="fixed" a un elemento de encabezado o pie de página de jQuery Mobile.

<div data-role="footer" data-position="fixed">
    <h1>Fixed Footer!</h1>
</div>

Answer 2

Agregar el data-position = "fixed" y agregar el siguiente estilo en el css arreglará el problema z-index: 1;

Answer 3

Como este problema es viejo, muchas cosas han cambiado.

Ahora puede obtener este comportamiento agregando esto al pie de página div

data-position="fixed"

Más información aquí: http://jquerymobile.com/test/docs/toolbars/bars-fixed.html

También ten cuidado, si usas el CSS mencionado anteriormente junto con la nueva solución JQM, ¡NO obtendrás el comportamiento apropiado!

Answer 4

En mi caso, necesitaba usar algo como esto para mantener el pie de página fijo en la parte inferior si no hay mucho contenido, pero no flotando sobre todo constantemente, como http://jquerymobile.com/test/docs/toolbars/bars-fixed.html parece funcionar ...

.ui-content
{
    margin-bottom:75px; /* Set this to whatever your footer size is... */
}

.ui-footer {
    position: absolute !important;
    bottom: 0;
    width: 100%;
}

Answer 5

Este script parece funcionar para mí ...

$(function(){
    checkWindowHeight();
    $(document).bind(''orientationchange'',function(event){
        checkWindowHeight();
    })
});

function checkWindowHeight(){
        $(''[data-role=content]'').each(function(){
        var containerHeight = parseInt($(this).css(''height''));
        var windowHeight = parseInt(window.innerHeight);
        if(containerHeight+118 < windowHeight){
            var newHeight = windowHeight-118;
            $(this).css(''min-height'', newHeight+''px'');
        }
    });
}

Answer 6

Las siguientes líneas funcionan bien ...

var headerHeight = $( ''#header'' ).height();
var footerHeight = $( ''#footer'' ).height();
var footerTop = $( ''#footer'' ).offset().top;
var height = ( footerTop - ( headerHeight + footerHeight ) );
$( ''#content'' ).height( height );

Answer 7

Pensé que compartiría mi solución CSS solo aquí. De esta forma, puede evitar la sobrecarga adicional de usar JS para esto.

Este no es un pie de página de posición fija. El pie de página estará fuera de la pantalla si el contenido de la página es más alto que la pantalla. Creo que se ve mejor de esta manera.

El cuerpo y .ui-page min-height y height son necesarios para evitar que el pie de página salte hacia arriba y hacia abajo durante las transiciones.

Funciona con la última versión de JQM a partir de ahora, 1.4.0

body,
.ui-page {
    min-height:100% !important;
    height:auto !important;
}

.ui-content {
    margin-bottom:42px; /* HEIGHT OF YOUR FOOTER */
}

.ui-footer {
    position:absolute !important;
    width:100%;
    bottom:0;
}

Answer 8

Puedes agregar esto en tu archivo css:

[data-role=page]{height: 100% !important; position:relative !important;}
[data-role=footer]{bottom:0; position:absolute !important; top: auto !important; width:100%;}  

Por lo tanto, la función de datos de la página ahora tiene una altura del 100% y el pie de página está en la posición absoluta.

También Yappo ha escrito un excelente complemento que puedes encontrar aquí: jQuery Mobile en un plugin de iScroll http://yappo.github.com/projects/jquery.mobile.iscroll/livedemo.html

Espero que hayas encontrado la respuesta!

Una actualización de respuesta

Ahora puede usar el atributo de data-position="fixed" para mantener su elemento de pie de página en la parte inferior.
Documentos y demostraciones: http://view.jquerymobile.com/master/demos/toolbar-fixed/

Answer 9

jQm ofrece:

• http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/toolbars/docs-footers.html
• http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/toolbars/bars-fixed.html
• http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/toolbars/bars-fullscreen.html
• http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/toolbars/footer-persist-a.html

Ninguno de estos funciona?

Answer 10

http://ryanfait.com/sticky-footer/

Podrías usar esto y usar jQuery para actualizar la altura de css de los elementos para asegurarte de que permanezca en su lugar.