CSS Como deixar o Rodapé fixo fim da página quando houver pouco conteúdo.

Leirbag System NRx · 29 de outubro de 2019

Alguém saber alguma maneira simples de fazer isso usando apenas CSS e HTML puro?

navegantenarede · 29 de outubro de 2019

@Leirbag System NRx dá uma olhada neste exemplo.

Everson Luiz · 29 de outubro de 2019

outra maneira que eu considero "geralmente quando estou trabalhando em sistemas legados" é tentar envolver o footer em um container e nesse container colocar

.container{min-height: 100vh;}

colocando o footer com vertical-align:botton;

Leirbag System NRx · 5 de novembro de 2019

@Everson Luiz Poderia me dar um exemplo?

adicionado 36 minutos depois

@navegantenarede Esse poder servir dependendo do Layout planejado, mas no meu caso, quero que preencha o espaço livre quando houver pouco conteúdo(sem a barrinha vertical) e que apareça no fim da pagina quando houver muito conteúdo(Quando aparece barrinha vertical do mouse).

Everson Luiz · 13 de novembro de 2019

Em 05/11/2019 às 01:09, Leirbag System NRx disse:

@Everson Luiz Poderia me dar um exemplo?

oi amigo, desculpe a demora, estava fora do pais acertando a vida haha. então o que precisa não é tão complexo, criei um modelinho que vai te ajudar bastante acredito. espero ter ajudado!

Aqui está já funcionando. https://jsfiddle.net/4bxdwu1n/2/

HTML

<!doctype html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <title>Exemplo haha</title>
  </head>
  <body>
    <div class="container">
      <div class="conteudo">
        <h1>Olá, Mundo</h1>
      </div>
      <div class="footer">
        <div class="footer_content">
          <p>
            aqui fica o conteudo da footer
          </p>
        </div>
      </div>
    </div>
  </body>
</html>

CSS

body{
  background-color:#ddd;
  padding:0; /*remove o padding da div*/
  margin: 0; /*remove a margin*/
}
h1{
  margin: 0; /*remove a margin do h1 pra não bugar haha*/
}
.container{
  background-color:#eee; /*pra a gente ver a div em ação*/
  height:100vh; /*estica a div até o fim da pagina*/
  margin:0; /*remove o padding da div*/
 }
.footer{
  /* Nessas 2 abaixo onde fica a magica, a 'position:absolute'' serve para a div em relação ao posicionamento do seu elemento pai, já o bottom:0' puxa a div para 0px a partir da linha inferior do elemento pai*/
  position: absolute;
  bottom: 0;
  background-color:#bbb;
  width: 100%; /* tamanho total no eixo x (largura)*/
  height: 2.5rem; /* tamanho do seu footer */
}