Cómo anclar un DIV al pie de una página (En 3 Pasos)

Por gary fish
Cómo anclar un DIV al pie de una página (En 3 Pasos)
Comstock/Comstock/Getty Images

Para anclar un DIV en la parte inferior de una página HTML tendrás que utilizar un CSS. CSS significa Cascading Style Sheet (Hoja de estilo en cascada) y se refiere a las fuentes, los colores y el posicionamiento de los elementos del documento HTML y el sitio web que se representa. Al ajustar la posición dentro del CSS, podrás anclar el elemento o DIV a una ubicación específica si el posicionamiento está configurado como fijo. De esta forma, otros elementos de la página funcionarán en función del elemento, pero el DIV especificado permanecerá anclado en su lugar.

Cómo anclar un DIV a la parte inferior de la página de un sitio web

Paso 1

Introduce el código DIV básico de pie de página en tu editor HTML. El código deberá ser similar a esto:

Este es el código para el DIV que deseas anclar al pie de la página HTML.

Paso 2

Agrega una regla CSS a la hoja de estilo para el contenedor, el encabezado y el pie de página de tu página. La hoja de estilo CSS debería tener este aspecto:

.wrap { position:relative; margin:0 auto; width:960px; }

header, #footer {

width:100%; float:left; }

El ancho del contenedor de 960 píxeles se deberá cambiar para adaptarse a las dimensiones de la página que estés creando.

Paso 3

Añade código adicional para el CSS que se aplica sólo al DIV que deseas anclar a la parte inferior de la página. El código debería tener este aspecto:

footer {

position:fixed; bottom:0; z-index:999999; }

Este código anclará el DIV al pie de la página independientemente de lo que se añada o se quite de la página.