1

Quero deixar o meu footer (http://codepen.io/xmauricioo/full/Zemzvv/) igual o footer dessa pagina (https://codepen.io/cbracco/full/zekgx) "Always on bottom". Já tentei de tudo e não consigo encontrar o erro. O meu footer fica subindo como se estivesse fixed. Tentei utilizar esse link Footer no final do documento, mas nao resolveu. Obrigado!!

2
  • 1
    Possível duplicata de Footer no final do documento
    – leofontes
    Commented 30/03/2017 às 21:34
  • Obrigado pela referência @leofontes, mas não era exatamente o que eu procurava esse link que você passou. Eu também estava com problema do footer subindo junto quando o viewport era diminuido. Mas com a ajuda do CelsomTrindade consegui resolver. Commented 31/03/2017 às 15:58

2 Respostas 2

8

Um dos principais motivos de eu não gostar de usar essa técnica, é pelo fato de envolver o position: absolute, o que não funciona no caso de um site dinâmico (responsivo), pois depende da definição do padding-bottom. O que eu tenho utilizado é o uso de display:flex no body. Algo assim:

html {
    height: 100%;
    min-height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

footer {
    margin-top: auto;
}

Deste modo, você declara que o body deve ter pelo menos 100% da altura e que o rodapé ficará fixo ao fim da página.


No entanto, o seu código atual não está funcionando pois o elemento .wrapper também possui a propriedade position definida como absolute, o que irá ignorar o posicionamento da mesma na página. Basta remover essa propriedade e seu código irá funcionar.

4
  • Obrigado @CelsomTrindade, isso ajudou a resolver o meu problema. Também apaguei o wrapper que só estava atrapalhando. Se quiser ver como ficou: codepen.io/xmauricioo/full/Zemzvv. Commented 31/03/2017 às 15:59
  • @MauricioSantos bacana, simplificou bastante né? Que bom que pude ajudar! Se a resposta resolveu seu problema, não esqueça de marcar como "aceita" =D Commented 31/03/2017 às 16:16
  • feito. @CelsomTrindade. Obrigado! Commented 31/03/2017 às 20:05
  • 1
    Melhor solução já encontrada :) Commented 23/04/2017 às 3:55
-1

Faz o seguinte, inverte as positions do seu wrapper e do seu footer.

Tenta botar position: relative no seu wrapper e position: absolute no seu footer.

Desse jeito o seu footer fica absoluto dentro do seu wrapper.

1
  • Tentei e não funcionou, acabei removendo o wrapper que só estava atrapalhando e sem serventia. Obrigado!. Commented 31/03/2017 às 16:00

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