css-float - float - posicionar div css

Pie de página flotante siempre en la parte inferior y visible.

Question

Tengo un sitio web como este: >> sitio web << . Está construido a partir de 2 cuadros - principal y un pie de página. Estaba intentando que funcionara sin marcos (no funciona en teléfonos móviles). ¿Hay algún método simple de CSS o jQuery para pegar el pie de página en la parte inferior para que sea visible siempre? ¿Entonces el efecto es como en el sitio web de arriba? Estaba intentando usar css, pero el pie de página aparece solo cuando me desplazo hacia abajo. Quiero que el pie de página cubra el contenido real, por lo que siempre es, por ejemplo, 50 píxeles de alto y siempre está visible en la parte inferior de la pantalla. incluso si la página es 10000px alto. Creo que es algo simple, pero me perdí en algún lugar allí. De forma anticipada, muchas gracias por su ayuda

Answer 1

Continuando desde Sam Jones:

Básicamente, esto verifica si la altura del documento llenará la ventana, si es menor que la ventana, se adjuntará a la parte inferior de la ventana, si el documento es más grande que el tamaño de la ventana, se adjuntará a la parte inferior de El documento (por lo que solo es visible cuando se desplaza hacia abajo).

¡Si cambia el tamaño de la ventana, se recalculará y todo debería funcionar correctamente!

CSS

#footer {
bottom: 0px;
}

HTML

<div id="footer">
Footer content
</div>
<script>
var footerResize = function() {
$(''#footer'').css(''position'', $("body").height() + $("#footer").innerHeight() > $(window).height() ? "inherit" : "fixed");
};
$(window).resize(footerResize).ready(footerResize);
</script>

Answer 2

Incluso podemos comparar las alturas y establecer el pie de página en la parte inferior utilizando el código de abajo.

 $(document).ready(function(){
if($("body").height() < $(window).innerHeight()) {
$(''#footer'').css(''position'',''fixed'');
$(''#footer'').css(''bottom'',0);
}
});

Answer 3

Para mí esto funciona mejor, porque la altura del cuerpo incluye el pie de página cuando la posición es estática o heredada:

 var footerResize = function() {
if ($(''#footer'').css(''position'') == "fixed")
$(''#footer'').css(''position'', $("body").height() + $("#footer").height() > $(window).innerHeight() ? "inherit" : "fixed");
else
$(''#footer'').css(''position'', $("body").height() > $(window).innerHeight() ? "inherit" : "fixed");

};

Se mantiene en la parte inferior al crecer la ventana ahora.

Answer 4

Sí. Es la position: fixed propiedad position: fixed .

.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 50px;
}

Demostración: http://jsfiddle.net/ZsnuZ/

Answer 5

(function() {
$(''.footer'').css(''position'', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();