Como fixar um DIV na parte inferior de uma página

Escrito por gary fish | Traduzido por pedro antonio
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como fixar um DIV na parte inferior de uma página
O HTML é a linguagem base usada para criar documentos de Internet e baseados em rede (Comstock/Comstock/Getty Images)

Para fixar um DIV na parte inferior de uma página em HTML, será necessário utilizar um CSS. O CSS significa Cascading Style Sheet (Folha de estilo em cascata, em inglês) e se refere às fontes, cores e posicionamento dos elementos do documento HTML e site que é processado. Definir o posicionamento dentro do CSS pode fixar o elemento ou DIV a um local específico, se o posicionamento estiver definido como fixo. Isto permitirá que os outros elementos da página funcionem em torno deste, mas a informação DIV ficará fixada no lugar.

Nível de dificuldade:
Moderado

Outras pessoas estão lendo

Instruções

    Como fixar um DIV na parte inferior da página de um site

  1. 1

    Digite o código básico DIV de rodapé no seu editor de HTML. Ele deverá ser semelhante a este:

    <div id="footer"> <div class="wrap"> <p>Insert content here.</p> </div> </div>

    Este é o código para o DIV que se pretende fixar na parte inferior da página HTML.

  2. 2

    Adicione uma regra CSS à folha de estilo para a capa, cabeçalho e rodapé da página. A folha de estilo CSS deve ser semelhante a isto:

    .wrap { position:relative; margin:0 auto; width:960px; }

    header, #footer {

    width:100%; float:left; }

    A largura da capa de 960 pixels deve ser alterada para se adequar às dimensões da página que está sendo criada.

  3. 3

    Adicione o código ao CSS que se aplica apenas à DIV que se quer fixada no final da página. Ele deve ficar assim:

    footer {

    position:fixed; bottom:0; z-index:999999; }

    Este código irá fixar o DIV na parte inferior da página, não importa o que mais seja adicionado ou removido dela.

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