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!!
-
1Possível duplicata de Footer no final do documento– leofontesCommented 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.– Mauricio SantosCommented 31/03/2017 às 15:58
2 Respostas
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.
-
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
-
-
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.
-
Tentei e não funcionou, acabei removendo o wrapper que só estava atrapalhando e sem serventia. Obrigado!. Commented 31/03/2017 às 16:00