viernes, 23 de marzo de 2012

CSS para footer, Código para mantener el pie de página siempre al final

Aplicando el siguiente código html, ponemos el pie de página al final de la web, aún si el contenido de nuestro sitio es menor, pero no queda fijo, si el contenido aumenta, él pie de página siempre se va al final. 


HTML



<html>
<head>
 .
 .
 .
</head>
<body>
 <div class="wrapper">
  ..... contenido web
 </div>
 <footer>
 .... contenido pie de ágina 
 </footer>
</body>
</html>

CSS



* {
margin:0px;
}

html, body {
height: 100%;
}


.wrapper {
min-height: 100%;
clear:both;
}


footer {
position: relative;
margin-top: -63px; /* ponga en negativo el alto de su pie de página para nuestro    ejemplo usamos 63, usted debe remplazarlo según su diseño   */
height: 63px;
clear:both;
width:100%;
}



2 comentarios:

  1. Hola: quisiera ayuda para aplicar esta técnica a un Theme de Wordpress, con la intención de mostrar animaciones flash en el footer (siempre al final a pesar del scroll).-
    Desde ya muchas gracias

    ResponderEliminar
    Respuestas
    1. Realmente si quieres que esté fijo, no te funcionaría, porque este código facilita que el pie esté abajo cuando el contenido de la web es pequeño, pero si el contenido aumenta este sigue abajo pero no fijo.

      Si lo deseas fijo usa este código:

      #menufijo {
      width: anchopx;
      height: altopx;
      position: fixed; /* Fija el contenedor a una posición */
      bottom: 0px; /* El div se sitúa abajo */
      z-index: -88; /* Lo muestra por encima de otros div */
      }

      Eliminar

Desea contactar con nosotros, deje un comentario y pronto le daremos respuesta.