Cómo conseguir que un Div esté pegado a la parte inferior de un Div padre

Escrito por amanda rumble | Traducido por beatriz sánchez
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo conseguir que un Div esté pegado a la parte inferior de un Div padre
Organiza el contenido en tu página web para que sea fácil para el usuario. (BananaStock/BananaStock/Getty Images)

Las etiquetas Div organizan el contenido de una página web y dividen la página HTML en secciones, normalmente para simplificar el formato. Los Div de cada página se unen para formar una página web completa. Los usuarios pueden tener un Div para la cabecera, otro para la barra lateral, otro para el contenido y otro para el pie. No hay límite para el número de secciones permitidas en un sitio. Si necesitas que un Div se "pegue" a la parte inferior de otro, usa el posicionamiento absoluto y relativo en tu código.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Abre un archivo en blanco con el Bloc de Notas para tu página HTML.

  2. 2

    Crea dos clases Div en tu documento HTLM. El primero, el Div padre, será el "wrapper" para el ejemplo y el de la parte inferior se llamará "bottom". De momento, el código es así:

    <div class="wrapper"> </div>

    <div class="bottom"> </div>

  3. 3

    Coloca tu contenido después de la etiqueta de clase, pero antes de la etiqueta de cierre </div>.

    <div class="wrapper"> Contenido de la página padre </div>

    <div class="bottom"> Contenido de la página de pie </div>

  4. 4

    Añade los atributos de posición al documento en la cabecera. El "." indica que estás dándole estilo a una clase y "position:" indica cómo quieres colocar la sección. El "0" en el ".inferior" indica que no hay margen en cada lado del div.

    <head> <style type="text/css"> .wrapper{position:relative;} .bottom{position:absolute; bottom:0;} </style>

    </head> <div class="wrapper"> Parent page content </div>

    <div class="bottom"> Footer page content </div>

Consejos y advertencias

  • El posicionamiento del Div puede ser absoluto, lo que lo colocará de forma relativa al primer div que está posicionado de forma no estática, o relativa, que lo coloca de forma relativa a su posición normal.
  • Cierra siempre todas las etiquetas de tu página para evitar errores inesperados.

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