on-load-remove-class="default-font">
×
Loading ...

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

Atualizado em 23 março, 2017

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

Organize o conteúdo da sua página para facilitar a interação do usuário (BananaStock/BananaStock/Getty Images)
  1. Abra um arquivo do bloco de notas em branco para ser sua página HTML.

    Loading...
  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. 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é
  • 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é
  • Loading...

    Dicas

    • O posicionamento pode ser "abolute", que posiciona a si mesmo usando a primeira "<div>" que não estiver estaticamente posicionada como referência, ou "relative", que a posiciona em relação à sua própria posição normal.

    Aviso

    • Sempre "feche" as tags da sua página para prevenir-se contra erros inesperados.

    Referências

    Loading ...
    Loading ...