Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Como deixar o rodapé fixo na parte de baixo da página ?

Referente ao curso HTML5 e CSS3 parte 3: trabalhando com formulários e tabelas

por MAERCIO MAMEDES DA SILVA
| 165.8k xp | 46 posts
Desenvolvedor Backend

Como faço para deixar o rodapé fixo, sem que haja distorção na renderização do conteúdo, quando há alteração na resolução da tela?

Quando utilizo do código:

footer {
    text-align: center;
    background: url("bg.jpg");
    padding: 40px 0;
}

Renderização com css utilizado na aula

Porém quando há alteração na resolução da imagem a posição do rodapé muda de posição:

Rodapé deslocado para cima Quando eu coloco o rodapé numa posição absoluta, quando há alteração de resolução da tela, o rodapé sobrepõe o resto do conteúdo da página:

footer{
    text-align: center;
    background: url("/_imagens/bg.jpg");
    position:absolute;
    bottom: 0;
}

Rodapé sobrepondo área do conteúdo da página

4 respostas
por Luan Alves
| 427.6k xp | 555 posts
Monitor em Desenvolvimento Front-End

Olá, Maercio. Como vai?

Tem esse vídeo bem legal falando sobre positions de uma colega de equipe aqui da Alura.

Nesse caso você pode colocar um min-height: 200px; na classe principal;

E no footer aplicar bottom: 0; position:static;

Confere se chegou no resultado que você espera por favor?

Fico aguardando seu retorno! :)

por MAERCIO MAMEDES DA SILVA
| 165.8k xp | 46 posts
Desenvolvedor Backend

Quando a variação de resolução é real, ou seja, quando mudo de monitor, se comporta como o esperado. Mas se houver uma diminuição no zoom do navegador o footer desloca-se para cima a partir de um certo valor

solução!
por Luan Alves
| 427.6k xp | 555 posts
Monitor em Desenvolvimento Front-End

Olá, Maercio. Como vai?

Perdão, achei que você queria apenas o footer fixo embaixo do layout, e não o layout ocupando 100% da tela.

Para isso, devemos usar porcentagem, precisamos definir o html com 100% da página, o body com 100% também, que terá o espaçamento do pai, que é o html como referência.

A partir daí podemos definir o espaçamento de cada área. 

html {
    width: 100%;
    height: 100%;
}

body {
    width: 100%;
    height: 100%;
}

header {
    height: 20%;
    background: green;
    width: 100%;
}

main {
    width: 100%;
    height: 60%;
    background: blue;
}

footer {
    height: 20%;
    width: 100%;
    text-align: center;
    background: white;
}

Assim, independente do tamanho da tela, o layout irá realizar o espaçamento total.

Porém tem um detalhe importante, caso você aplique por exemplo uma imagem no footer que tenha uma altura maior do que ele, ela vai distorcer o layout, para isso é preciso definir uma altura com porcentagem também para os elementos internos, e esta porcentagem será aplicada tendo o tamanho do elemento pai como referência. Ou seja, caso aplique 100% de height para a imagem, ela ocupará 100% da altura do footer.

É muito indicado usar porcentagem para criação de layouts, pois assim o layout não fica estático, e pode ir se adaptando de acordo com o tamanho da tela.

Consegui ajudar em sua dúvida? Espero que sim! :)

Caso tenha mais dúvidas, pode contar com a gente!

Me conta se realizando desta forma deu certo para você!

por MAERCIO MAMEDES DA SILVA
| 165.8k xp | 46 posts
Desenvolvedor Backend

Desculpa a demora pelo feedback. Resolveu o problema