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

Escrito por kevin lee | Traducido por manuel lama paniagua
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo forzar un pie de página para que se quede en el fondo mediante CSS
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. (Hemera Technologies/Photos.com/Getty Images)

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.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 1

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

  2. 2

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

    <div class="bottom"> Este texto va dentro del pie de página </div>

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

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

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

Consejos y advertencias

  • Coloca todos los elementos HTML que desees, como los enlaces, dentro del div. Se convierten en parte de tu pie de página y se mueven donde posiciones el div.
  • La definición de clase CSS mantiene el pie de página al nivel de la parte inferior de la página Web. Si prefieres mover el pie de página un poco, cambia el valor de la propiedad "bottom" de "0px" a un valor diferente. Por ejemplo, para forzar al pie de página a que aparezca 20 píxeles por encima de la parte inferior de la página, establece el valor de la propiedad bottom a "20px".

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