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

Escrito por amanda rumble | Traduzido por vinícius albuquerque
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
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 "<div>" 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 "<div>" fique junto à parte inferior de outra, utilize o posicionamento "absolute" e o "relative" no código.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

  1. 1

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

  2. 2

    Crie duas "<div>" 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:

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

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

  3. 3

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

    <div class="wrapper"> Conteúdo da página </div>

    <div class="bottom"> Conteúdo do rodapé </div>

  4. 4

    Acrescente os atributos de posicionamento do documento no "<header>". 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 "<div>".

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

    </head> <div class="wrapper"> Conteúdo da página </div>

    <div class="bottom"> Conteúdo do rodapé </div>

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.

Não perca

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