Como fazer uma "div" ficar junto à parte inferior de outra

Escrito por amanda rumble | Traduzido por vinícius albuquerque
Como fazer uma "div" ficar junto à parte inferior de outra
Organize o conteúdo da sua página para facilitar a interação do usuário (BananaStock/BananaStock/Getty Images)

As tags "

" organizam o conteúdo de uma página da web e divide o HTML em seções, geralmente para simplificar a formatação. Cada uma, em conjunto com as outras, formam uma página completa. Os usuários podem ter uma para cada parte (cabeçalho, barra lateral, conteúdo e rodapé). Não há limites para o número de seções possíveis em um site. Caso precise que uma "
" fique junto à parte inferior de outra, utilize o posicionamento "absolute" e o "relative" no código.

Instruções

  1. 1

    Abra um arquivo do bloco de notas em branco para ser sua página HTML.

  2. 2

    Crie duas "

    " com classes diferentes no documento. A primeira, que é o "elemento pai", será a "wrapper" do exemplo e a que ficará na parte inferior será chamada de "bottom". Até o momento, o código está assim:

  3. 3

    Coloque o conteúdo depois da tag onde está o atributo "class", porém antes de "

    ".

    Conteúdo da página
    Conteúdo do rodapé
  • 4

    Acrescente os atributos de posicionamento do documento no "

    ". O "." indica que você está formatando uma classe e o "position:" especifica como deseja posicionar a seção. O "0" em ".bottom" indica que não há margem em nenhum dos lados da "
    ".

    Conteúdo da página

    Conteúdo do rodapé
  • Dicas & Advertências

    • O posicionamento pode ser "abolute", que posiciona a si mesmo usando a primeira "" que não estiver estaticamente posicionada como referência, ou "relative", que a posiciona em relação à sua própria posição normal.
    • Sempre "feche" as tags da sua página para prevenir-se contra erros inesperados.
    Filtro:
    • Geral
    • Artigos
    • Slides
    • Vídeos
    Mostrar:
    • Mais relevantes
    • Mais lidos
    • Mais recentes

    Nenhum artigo disponível

    Nenhum slide disponível

    Nenhum vídeo disponível