Ir ao conteúdo
  • Cadastre-se

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


Posts recomendados

@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).

Link para o comentário
Compartilhar em outros sites

  • 2 semanas depois...
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 */
}
Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

Aprenda a ler resistores e capacitores

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!