Como manter seu rodapé onde ele pertence?

Esta postagem também está disponível em coreano .

Um rodapé é o último elemento da página. No mínimo, está na parte inferior da janela de visualização ou mais abaixo se o conteúdo da página for mais alto do que a janela de visualização. Simples, certo? ?

Ao trabalhar com conteúdo dinâmico que inclui um rodapé, às vezes ocorre um problema em que o conteúdo de uma página não é suficiente para preenchê-la. O rodapé, em vez de permanecer no final da página onde gostaríamos que permanecesse, sobe e deixa um espaço em branco abaixo dele.

Para uma solução rápida, você pode posicionar absolutamente o rodapé na parte inferior da página. Mas isso tem seu lado negativo. Se o conteúdo ficar maior que a janela de visualização, o rodapé permanecerá 'preso' na parte inferior da janela de visualização, quer queiramos ou não.

Isso mostra o comportamento que não queremos e queremos:

Vejamos uma abordagem para conseguir isso.

Manter o rodapé sob controle

index.html:

main.css:

#page-container { position: relative; min-height: 100vh; } #content-wrap { padding-bottom: 2.5rem; /* Footer height */ } #footer { position: absolute; bottom: 0; width: 100%; height: 2.5rem; /* Footer height */ }

Então, o que isso está fazendo?

  • O page-containercircunda tudo na página e define sua altura mínima para 100% da altura da janela de visualização ( vh). Como estão relative, seus elementos filhos podem ser definidos com a absoluteposição baseada nela posteriormente.
  • O content-wraptem um preenchimento inferior que é a altura do rodapé, garantindo que seja deixado espaço exatamente suficiente para o rodapé dentro do contêiner em que ambos estão. Uma embalagem divé usada aqui para conter todo o conteúdo da página.
  • A footeré definido como absolute, aderindo ao bottom: 0do page-containerque está dentro. Isso é importante, pois não é absolutepara a janela de visualização, mas se moverá para baixo se page-containerfor mais alto que a janela de visualização. Conforme declarado, sua altura, arbitrariamente definida como 2.5remaqui, é usada content-wrapacima dela.

E aí está. Seu rodapé agora fica onde você esperava!

Toques finais

Claro, isso é CSS, então não estaria completo sem algumas considerações de UX específicas para dispositivos móveis e uma abordagem alternativa usando em min-height: 100%vez de 100vh. Mas isso tem suas próprias desvantagens.

Flexbox (com flex-grow) ou Grid também podem ser usados ​​e são ambos muito poderosos.

O método escolhido depende inteiramente de você e das especificações de seu projeto. Esperançosamente, o exemplo acima e os links ajudam você a economizar algum tempo ao tomar sua decisão e implementá-la.

Obrigado pela leitura. Aqui estão algumas outras coisas que escrevi recentemente:

  • Um guia para iniciantes no serviço de contêineres elásticos da Amazon
  • Teste de reação com gracejo e enzima