Eu criei uma biblioteca muito simples https://github.com/ravinderpayal/FooterJS
É muito simples de usar. Após incluir a biblioteca, basta chamar esta linha de código.
footer.init(document.getElementById("ID_OF_ELEMENT_CONTAINING_FOOTER"));
Os rodapés podem ser alterados dinamicamente, recuperando a função acima com parâmetro / ID diferente.
footer.init(document.getElementById("ID_OF_ANOTHER_ELEMENT_CONTAINING_FOOTER"));
Nota: - Você não precisa alterar ou adicionar nenhum CSS. A biblioteca é dinâmica, o que implica que, mesmo que a tela seja redimensionada após o carregamento da página, ela redefinirá a posição do rodapé. Eu criei esta biblioteca, porque o CSS resolve o problema por um tempo, mas quando o tamanho da tela muda significativamente, da área de trabalho para o tablet ou vice-versa, eles se sobrepõem ao conteúdo ou não ficam mais visíveis.
Outra solução são as CSS Media Queries, mas você precisa escrever manualmente diferentes estilos CSS para diferentes tamanhos de tela, enquanto essa biblioteca faz seu trabalho automaticamente e é suportada por todos os navegadores básicos de JavaScript.
Edite a
solução CSS:
@media only screen and (min-height: 768px) {/* or height/length of body content including footer*/
/* For mobile phones: */
#footer {
width: 100%;
position:fixed;
bottom:0;
}
}
Agora, se a altura da exibição for maior que o tamanho do seu conteúdo, colocaremos o rodapé fixo na parte inferior e, caso contrário, ele aparecerá automaticamente no final da exibição, conforme for necessário rolar para visualizá-lo.
E, parece uma solução melhor que a JavaScript / biblioteca.