-2

Recentemente percebi que o rodapé da minha página, apesar de fixo na parte de baixo, estava sobrepondo o texto.

Daí procurei algumas soluções para isto e vi que a maioria das soluções tratavam-se de position: absolute ou position: fixed no rodapé. Em resumo, algo parecido com isto aqui:

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}

Se você não tiver muito conteúdo na página, beleza, sem problemas! Olha como fica:

* {
  text-align: center;
}

header,
footer {
  height: 30px;
  margin: 10px 0;
  background-color: #dddddd;
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%
}
<header>TÍTULO</header>
<main>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</main>
<footer>RODAPÉ</footer>

Mas se você tiver bastante coisa, o rodapé irá sobrepor o texto e ficará parecido com isso aqui: (Neste eu utilizei o position: fixed para o rodapé não ficar perdido no meio do texto)

* {
  text-align: center;
}

header,
footer {
  height: 30px;
  margin: 10px 0;
  background-color: #dddddd;
}
footer {
  position: fixed;
  bottom: 0;
  width: 100%
}
<header>TÍTULO</header>
<main>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dignissim luctus tincidunt. Ut fermentum nibh nec molestie venenatis. Nam eget sapien felis. Fusce bibendum est sit amet magna varius varius. Curabitur nulla nibh, mollis ac mattis quis, vehicula malesuada urna. Donec nisi turpis, commodo ac pellentesque nec, vehicula ut nisi. Nullam vulputate gravida facilisis. Vivamus suscipit velit ante. Proin malesuada porttitor nulla in euismod. Aenean laoreet laoreet odio a egestas. Nunc in orci volutpat, luctus lectus sed, tincidunt neque. Donec porttitor scelerisque accumsan. Pellentesque suscipit mauris tortor, eu scelerisque mi pharetra dapibus.

Aliquam nec euismod metus, et tincidunt est. Suspendisse elementum molestie tellus ac feugiat. Cras tempus mauris id aliquet tincidunt. Etiam velit velit, consectetur at consectetur nec, molestie vel dolor. Nulla at elementum diam, sit amet posuere nisi. Sed quis libero tristique, laoreet tellus vel, finibus leo. Sed a maximus dui, at bibendum nulla.

Suspendisse nibh nunc, lacinia non cursus at, condimentum laoreet lacus. Nunc nec felis eget diam egestas scelerisque nec aliquam velit. Phasellus tristique justo eu commodo bibendum. Quisque interdum lectus quis sapien molestie, at volutpat tellus tincidunt. Integer mollis libero eu ipsum ornare sollicitudin. Quisque non feugiat purus. Ut ante sapien, pellentesque a nibh ultricies, sodales volutpat neque. Ut nec euismod mi. Sed tempus porttitor risus a bibendum. Maecenas mauris felis, dictum quis convallis sed, tempus ut arcu. Aliquam lobortis lorem magna, efficitur porttitor nisl dignissim eu. Nulla gravida est lorem, sed vestibulum nunc convallis ut. Fusce eu finibus sem, volutpat faucibus sapien. Vivamus commodo vehicula augue a finibus. Vestibulum laoreet rutrum enim nec pretium. Quisque sit amet nulla hendrerit, bibendum risus in, fringilla eros.

Donec non lectus turpis. Vestibulum et eleifend arcu. Praesent vulputate efficitur nibh nec tempus. Quisque ut sem massa. Aenean metus mauris, venenatis a dictum sed, pellentesque id urna. Morbi posuere, purus non consequat finibus, tortor lectus semper nisi, sit amet maximus augue leo ac mauris. Nulla facilisi. Aenean suscipit, erat ut tempus ultricies, sapien leo scelerisque nibh, ac fringilla nibh risus viverra tortor. Nullam ut euismod nulla. Nam in massa quis erat dictum semper. Suspendisse viverra massa at turpis aliquam, sed placerat arcu condimentum. Vivamus ultrices aliquet rhoncus. Aenean aliquet tellus quis fringilla lacinia. Curabitur ut cursus tellus, at tincidunt libero. Cras euismod, nibh sit amet imperdiet molestie, ipsum justo dapibus risus, et maximus tellus est at metus.

Aliquam accumsan tellus turpis, ac fringilla enim posuere dictum. Morbi ac volutpat lacus. Integer accumsan sit amet odio eu iaculis. Proin sagittis efficitur risus, sed blandit massa sagittis et. Donec euismod, mauris sed cursus egestas, lacus tortor pharetra diam, luctus aliquet nulla ipsum ac leo. Ut luctus arcu dolor. Duis varius blandit porta. Morbi fermentum magna ut massa congue hendrerit. Morbi venenatis ullamcorper lacus. Morbi dictum, lectus viverra malesuada tincidunt, purus sapien facilisis libero, eget pharetra elit augue a erat. Etiam auctor nibh molestie massa lacinia, quis semper metus finibus. Vivamus porttitor rhoncus porta. Pellentesque ornare rutrum sagittis.</main>
<footer>RODAPÉ</footer>

Se você tem um conteúdo dinâmico ou uma tabela que alterna o número de linhas é pior ainda.

Mas então, o que fazer? Como fazer algo mais genérico e que funcione bem na maioria das páginas?

1
  • Não há necessidade do calc, você pode usar uma das técnicas que descrevi em Footer sempre no final da pagina, o calc até ajuda, mas um simples margin-botton no "body" ou no "main" (depende do elemento que usa para o conteudo que pode crescer/expandir) com a mesma altura do rodapé já resolve.
    – Syzoth
    Commented 8/06/2021 às 7:30

1 Resposta 1

-2

A melhor solução que encontrei utilizando apenas css foi através da função calc combinada com a altura do viewport, vou explicar.

Como você deve saber, viewport é a área visível do usuário em uma página, em outras palavras é tudo o que você vê, com exceção das barras e itens do navegador. Basicamente, viewport é isto aqui:

viewport

Mais detalhes sobre viewport aqui: W3Schools.

A ideia então é calcular 100% da altura do viewport subtraído da altura do cabeçalho e do rodapé. Em resumo é isto aqui:

  min-height: 100vh;
  min-height: calc(100vh - X - Y);

Sendo X e Y as alturas do header e do footer.

Disclaimer: é importante que incluir as margens superiores e inferiores, caso existam.

O código inteiro fica assim:

* {
  margin: 0;
  padding: 0;
  text-align: center;
}

header {
  height: 30px;
  margin-bottom: 10px;
  background-color: #dddddd;
}

main {
  min-height: 100vh;
  min-height: calc(100vh - 80px);
  min-height: -moz-calc(100vh - 80px);
  min-height: -webkit-calc(100vh - 80px);
  position: relative;
  background-color: rgb(201, 225, 222);
}

footer {
  height: 30px;
  margin-top: 10px;
  background-color: #dddddd;
  background-color: rgb(0, 55, 96);
}
<header>TÍTULO</header>
<main>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dignissim luctus tincidunt. Ut fermentum nibh nec molestie venenatis. Nam eget sapien felis. Fusce bibendum est sit amet magna varius varius. Curabitur nulla nibh, mollis ac mattis quis, vehicula
  malesuada urna. Donec nisi turpis, commodo ac pellentesque nec, vehicula ut nisi. Nullam vulputate gravida facilisis. Vivamus suscipit velit ante. Proin malesuada porttitor nulla in euismod. Aenean laoreet laoreet odio a egestas. Nunc in orci volutpat,
  luctus lectus sed, tincidunt neque. Donec porttitor scelerisque accumsan. Pellentesque suscipit mauris tortor, eu scelerisque mi pharetra dapibus. Aliquam nec euismod metus, et tincidunt est. Suspendisse elementum molestie tellus ac feugiat. Cras tempus
  mauris id aliquet tincidunt. Etiam velit velit, consectetur at consectetur nec, molestie vel dolor. Nulla at elementum diam, sit amet posuere nisi. Sed quis libero tristique, laoreet tellus vel, finibus leo. Sed a maximus dui, at bibendum nulla. Suspendisse
  nibh nunc, lacinia non cursus at, condimentum laoreet lacus. Nunc nec felis eget diam egestas scelerisque nec aliquam velit. Phasellus tristique justo eu commodo bibendum. Quisque interdum lectus quis sapien molestie, at volutpat tellus tincidunt. Integer
  mollis libero eu ipsum ornare sollicitudin. Quisque non feugiat purus. Ut ante sapien, pellentesque a nibh ultricies, sodales volutpat neque. Ut nec euismod mi. Sed tempus porttitor risus a bibendum. Maecenas mauris felis, dictum quis convallis sed,
  tempus ut arcu. Aliquam lobortis lorem magna, efficitur porttitor nisl dignissim eu. Nulla gravida est lorem, sed vestibulum nunc convallis ut. Fusce eu finibus sem, volutpat faucibus sapien. Vivamus commodo vehicula augue a finibus. Vestibulum laoreet
  rutrum enim nec pretium. Quisque sit amet nulla hendrerit, bibendum risus in, fringilla eros. Donec non lectus turpis. Vestibulum et eleifend arcu. Praesent vulputate efficitur nibh nec tempus. Quisque ut sem massa. Aenean metus mauris, venenatis a
  dictum sed, pellentesque id urna. Morbi posuere, purus non consequat finibus, tortor lectus semper nisi, sit amet maximus augue leo ac mauris. Nulla facilisi. Aenean suscipit, erat ut tempus ultricies, sapien leo scelerisque nibh, ac fringilla nibh
  risus viverra tortor. Nullam ut euismod nulla. Nam in massa quis erat dictum semper. Suspendisse viverra massa at turpis aliquam, sed placerat arcu condimentum. Vivamus ultrices aliquet rhoncus. Aenean aliquet tellus quis fringilla lacinia. Curabitur
  ut cursus tellus, at tincidunt libero. Cras euismod, nibh sit amet imperdiet molestie, ipsum justo dapibus risus, et maximus tellus est at metus. Aliquam accumsan tellus turpis, ac fringilla enim posuere dictum. Morbi ac volutpat lacus. Integer accumsan
  sit amet odio eu iaculis. Proin sagittis efficitur risus, sed blandit massa sagittis et. Donec euismod, mauris sed cursus egestas, lacus tortor pharetra diam, luctus aliquet nulla ipsum ac leo. Ut luctus arcu dolor. Duis varius blandit porta. Morbi
  fermentum magna ut massa congue hendrerit. Morbi venenatis ullamcorper lacus. Morbi dictum, lectus viverra malesuada tincidunt, purus sapien facilisis libero, eget pharetra elit augue a erat. Etiam auctor nibh molestie massa lacinia, quis semper metus
  finibus. Vivamus porttitor rhoncus porta. Pellentesque ornare rutrum sagittis.</main>
<footer>RODAPÉ</footer>

Após executar o código acima, você poderá clicar em "Página toda" para ver o rodapé fixado no… bem, no rodapé.

Ressalto aqui que utilizei os prefixos -webkit- e -moz- porque, de acordo com o CanIUse, as versões mais antigas do Firefox, Chrome e Safari não suportam o calc.

Se você quiser saber mais sobre Unidades de CSS, recomendo este link: CSS Units. Neste link também tem um exemplo bem bacana de um vh aplicado em um tamanho de fonte.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .