HTML/CSS pie de página pegajoso

Enviado por Webmaster el Agosto 24, 2011 - 22:39

Es una de las funcionalidades más buscadas en Internet: el el pie de página pegajoso que permanece abajo en las páginas. Es increíblemente fácil de hacer, pero también puede ser difícil de configurar correctamente. En el ejemplo que sigue vamos hacer un pie de página que estará en la parte inferior de la página, mientras que el contenido no sea superior a la altura de la página. Cuando el contenido es mayor que la página el pie de página se empujará hacia abajo para que no cubra el contenido principal.


El contenido HTML

<html>
<body>
<div id="contenidoprincipal">
Contenido principal.
</ div>
<div id="piedepagina">
<p> contenido del pie de página </ p>
</ div>
</ body>
</ html>

Esta etiqueta HTML contiene un div llamado "contenidoprincipal". El contenido principal empujará el pie hacia abajo. La etiqueta div de pie de página se identifica por "piedepágina." De esta manera podemos poner instrucciones específicas de CSS para cada elemento de la página y determinar cómo se debe posicionar el pie de página.

Las instrucciones CSS

html, body {
height: 100%; / * hacer que la página llene toda la altura * /
}
* {
margin: 0;  / * márgenes podrían meter la pata * /
}
# contenidoprincipal  {
height: 100%;  / * empuja el pie hacia abajo * /
}
# piedepagina {
height: 50px;  / * establece la altura del pie de página * /
margin-top: -50px;  / * estas cifras tienen que ser opostas * /
}

Puedes modificar estos parámetros, los comentarios explican lo que cada cambio resulta en la página. Ahora es sólo probar y disfrutar!


Añadir nuevo comentario