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ê!
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:
