Cómo anclar un DIV al pie de una página

Escrito por gary fish | Traducido por eliana caruso
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo anclar un DIV al pie de una página
HTML es el lenguaje base utilizado para crear documentos de Internet y basados en la web. (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.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Instrucciones

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

  1. 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:

    <div id="footer"> <div class="wrap"> <p>Insert content here.</p> </div> </div>

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

  2. 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.

  3. 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.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles