Cómo forzar un pie de página para que se quede en el fondo mediante CSS

Por kevin lee
Los pies de página que aparecen en la parte inferior de las páginas, por lo general contienen enlaces a secciones importantes de una página web.

Los pies de página que aparecen en la parte inferior de las páginas, por lo general contienen enlaces a secciones importantes de una página web. CSS tiene una propiedad denominada "bottom" (fondo) que permite a los diseñadores de los sitios colocar los objetos en relación a la parte inferior de la página. Al establecer el valor de esta propiedad a cero, puedes hacer que tus pies se adhieran perfectamente a la parte inferior de cualquier página Web.

Paso 1

Abre cualquier documento HTML usando el bloc de notas o tu editor HTML.

Paso 2

Añade el siguiente elemento div a la sección "body" (cuerpo) de la página:

Este texto va dentro del pie de página

Este div contiene un texto de pie de página de muestra y una referencia a una clase CSS llamada "bottom".

Paso 3

Pega el código que se muestra debajo en la sección "head" (cabecera) del documento:

.bottom { position: absolute; text-align: center; width: 100%; bottom: 0px; width: 100%; }

Esta clase CSS -referenciada por el div- obliga al div a flotar en el fondo de la página web. La propiedad bottom, ajustada en "0px" en este ejemplo, mantiene el div en el fondo.

Paso 4

Guarda tu documento, y obsérvalo en tu navegador para confirmar que el pie de página aparece en el fondo de tu página web.