J'ai créé une bibliothèque très simple https://github.com/ravinderpayal/FooterJS
Son utilisation est très simple. Après avoir inclus la bibliothèque, appelez simplement cette ligne de code.
footer.init(document.getElementById("ID_OF_ELEMENT_CONTAINING_FOOTER"));
Les pieds de page peuvent être modifiés dynamiquement en rappelant la fonction ci-dessus avec différents paramètres / id.
footer.init(document.getElementById("ID_OF_ANOTHER_ELEMENT_CONTAINING_FOOTER"));
Remarque: - Vous ne devez pas modifier ou ajouter de CSS. La bibliothèque est dynamique, ce qui implique que même si l'écran est redimensionné après le chargement de la page, il réinitialisera la position du pied de page. J'ai créé cette bibliothèque, car CSS résout le problème pendant un certain temps, mais lorsque la taille de l'affichage change de manière significative, du bureau à la tablette ou vice versa, ils chevauchent le contenu ou ne restent plus collants.
Une autre solution est CSS Media Queries, mais vous devez écrire manuellement différents styles CSS pour différentes tailles d'écrans pendant que cette bibliothèque fait son travail automatiquement et est prise en charge par tous les navigateurs de base prenant en charge JavaScript.
Modifier la
solution 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;
}
}
Maintenant, si la hauteur d'affichage est supérieure à la longueur de votre contenu, nous allons fixer le pied de page au bas et sinon, il apparaîtra automatiquement en toute fin d'affichage, car vous devez faire défiler pour voir cela.
Et, cela semble une meilleure solution que JavaScript / bibliothèque.