Forcer le footer de Divi à être tout en bas de l'écran - Divi Community

Lorsque vous créez une page avec très peu de contenu, comme une page de contact par exemple, vous avez sans doute remarqué que le footer est à la suite du contenu mais pas en bas de l’écran.

Regardez cette exemple sur Divi Community :

footer haut divi
C’est pas super beau n’est-ce pas ?

On va donc forcer le footer à être collé tout en bas de l’écran, même lorsque le contenu ne prend pas tout l’espace.

Pour cela vous allez copier-coller le code suivant que Pierre avait proposé sur le groupe Facebook, soit dans Apparence -> Personnaliser -> CSS Additionnel, soit dans le fichier style.css de votre thème enfant :

.postid-1698 #main-footer {
position: absolute;
bottom: 0;
width: 100%;
}

Remplacez bien le numéro de .postid-1698 par l’identifiant de votre article. Comme me l’a fait remarquer Frédéric Frémo sur Facebook, autant ne charger ce CSS que sur les pages qui en ont réellement l’utilité.

Pour trouver le votre, rendez dans l’administration et ouvrez votre article. Regardez maintenant l’URL. L’identifiant est situé après le post=:

id article

Et c’est tout. Maintenant le footer est bien collé au bas de l’écran quelle que soit la taille du contenu :

divi footer bas

Et si jamais vous ne voulez pas vous embêter avec le code, Luis Alejandre de Divi4u (l’auteur de Divi Children) a créé un petit plugin gratuit qui fait exactement la même chose, mais en un peu mieux car il détecte la hauteur du contenu et n’applique la correction que si elle est nécessaire. Il s’agit de Divi Quasi Sticky Footer.

divi quasi sticky footer