Saltar al contenido

Cómo mantener el pie de página en la parte inferior incluso con el sitio web de altura dinámica

Si encuentras alguna parte que te causa duda puedes comentarlo y te ayudaremos lo mas rápido que podamos.

Solución:

Creo que esto resolverá todos tus problemas:

    

Necesita al menos un elemento con un #footer

Cuando no desee la barra de desplazamiento si el contenido se ajusta a la pantalla, simplemente cambie el valor de 10 a 0. La barra de desplazamiento se mostrará si el contenido no se ajusta a la pantalla.

Creo que estás buscando un Pie de página fijo

Prueba esto: https://web.archive.org/web/20161117191810/http://ryanfait.com/sticky-footer/ (archivo)

Del artículo anterior:

diseño.css:

* 
    margin: 0;

html, body 
    height: 100%;

.wrapper 
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */

.footer, .push 
    height: 142px; /* .push must be the same height as .footer */


/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

La página html:


    
        
    
    
        

Your website content here.

Mi solución jQuery/CSS favorita para un pie de página adhesivo (no fijo) es esta:

CSS:

html 
    position: relative;
    min-height: 100%;

footer 
    display:none;
    position: absolute;
    left: 0;
    bottom: 0;
    height: auto;
    width: 100%;

jQuery:

function footerAlign() 
  $('footer').css('display', 'block');
  $('footer').css('height', 'auto');
  var footerHeight = $('footer').outerHeight();
  $('body').css('padding-bottom', footerHeight);
  $('footer').css('height', footerHeight);



$(document).ready(function()
  footerAlign();
);

$( window ).resize(function() 
  footerAlign();
);

MANIFESTACIÓN:
http://codepen.io/anon/pen/ZQxQoR

Nota: su pie de página debe comenzar con

y terminar con

para usar este código tal cual, o puede modificar el código para que coincida con la identificación/clase de su pie de página.

¡Haz clic para puntuar esta entrada!
(Votos: 2 Promedio: 4)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *