Fixer son footer en bas de page grâce à Flexbox
Vous connaissez sans doute la technique du « sticky footer » via positionnement absolu (ou fixed). L’inconvénient de cette méthode est qu’elle nécessite de fixer la hauteur du footer. Et ça, c’est embêtant pour la maintenance et le responsive (hauteur variable en fonction du contenu et/ou du device).
Voici une solution via Flexbox qui permet de positionner le footer en bas de page, tout en lui permettant de conserver une hauteur fluide.
Modern browsers
Solution fonctionnelle sur tous les navigateurs « modernes » (Firefox 20+, Chrome 29+, Edge) :
<div id="page">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>#page {
min-height:100vh; /* 1 */
display:flex; /* 2 */
flex-direction:column; /* 3 */
}
#content {
flex-grow:1; /* 4 */
}- On définit un conteneur global
#pageayant une hauteur au minimum égale à la hauteur du viewport :
100vh= 100% viewport height. - Via
display:flexon lui précise un « contexte flex » (en anglais « flex layout»). - Ce contexte est transmis aux enfants directs auxquels on spécifie un affichage en colonne, grâce à
flex-direction. - Enfin,
flex-grow:1indique à#contentque tout l’espace disponible doit être occupé. Cela permettra de pousser le footer en bas de page et d’obtenir ainsi l’effet recherché.
Je vous conseille fortement d’utiliser un conteneur global, comme ici avec #page, pour réaliser ce genre de mise en page. En effet, définir un contexte flex directement sur <body> comme on peut le voir sur d’autres d’articles peut causer des problèmes avec les plugins qui créent des éléments en bas de page avant </body> (popup, autocomplete, etc.). Ces éléments risquent de ne pas s’afficher correctement, à cause du contexte flex hérité. Just saying.
Old browsers
Avant de passer au code voici quelques arguments qui, je l’espère, vous feront réfléchir quant à une éventuelle implémentation du sticky footer sur les vieux navigateurs :
- Ils représentent moins de 10% de vos visiteurs (StatCounter, Worldwide, Août 2016).
- Un navigateur obsolète peut être la conséquence de matériel obsolète. Et sur un vieil écran, la résolution est tellement faible qu’il y a des chances pour que l’effet sticky ne soit pas perceptible.
- Est-ce que le budget le permet ? Surtout si vous partez d’un projet existant, la solution suivante entrainant une modification de la structure (ce qui peut impacter le reste du site).
- Les utilisateurs sous IE10 ou Safari 6 le méritent-ils ? C’est l’argument en carton, mais j’en connais qui sont capables de le défendre. :)
Si ces arguments n’ont pas suffi à vous convaincre (vous, votre boss, votre client), voici la solution permettant d’étendre le support aux oldies (Firefox 20+, Chrome 21+, IE10+, Safari 6.1+, Opera 12.1+) :
<div class="ie-stickyFooter">
<div id="page">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</div>.ie-stickyFooter { /* 1 */
display:-ms-flexbox;
-ms-flex-direction:column;
}
#page {
width:100%; /* 2 */
min-height:100vh;
display:-webkit-flex; /* 3 */
display:flex;
-webkit-flex-direction:column; /* 3 */
flex-direction:column;
}
#content {
-webkit-flex-grow:1; /* 3 */
flex-grow:1;
}- Sur IE10/11, les enfants flex ignorent la hauteur du parent quand celui-ci associe conjointement
min-heightet flex layout (bug report). L’utilisation d’un conteneur supplémentaire (+ correctifs) permet de régler le problème. - Toujours sur IE10/11, les éléments flex affichés en mode colonne (cf. point précédent) ne se centrent pas correctement avec
margin:0 autosi aucune largeur n’est indiquée (bug report). Lewidth:100%permet donc à notre page de s’étendre jusqu’à une certaine largeur que l’on peut fixer avecmax-width. - L’emploi du préfixe
-webkit-permet d’élargir le support aux anciennes versions des navigateurs Webkit (Chrome, Safari, Opera).
Ressources utiles :
Commentaires (6)
Lâcher un com'
Merci beaucoup simple et efficace. En plus du coup je repars sur de bonne base niveau construction html de mon theme WP. Grace à flexbox je trouve que se passer de Bootstrap rend le code du thème beaucoup plus propre.
Un grand merci ! ;-)
Je travaille sur la mise à jour de Psychedelik.com et je commence à intégrer flexbox.
Je te remercie du tuyau pour le footer que j’utiliserai pour la version adaptée aux smartphones.
Bonjour, sur mon site ça m’affiche un gros bloc de blanc au dessus de tous mes éléments, comment se fait-ce ?
Ah ben ça ne le fait plus… En revanche j’ai quand même trop de blanc avant d’arriver à mon pied de page, que devrais-je faire à votre avis ? Merci beaucoup d’avance !
Bonsoir Sarah,
Dans vos CSS, l’élément qui contient les actualités
.et_pb_section_3a unpadding-bottom: 751px, c’est ce qui crée l’espace blanc en dessous.Obtenir l’effet sticky footer de l’article avec votre thème WordPress va nécessiter quelques retouches des templates, ce qui peut s’avérer périlleux si vous n’avez pas l’habitude.
Vous avez déjà un élément
#page-containersur lequel on peut appliquer ce qui correspond à#pagedans l’article (solution « Modern Browsers »).L’équivalent de
#contentchez moi est#et-main-areachez vous, mais le problème est que votre footer#main-footerest dans cette div de contenu, il faudrait le sortir et le mettre à la suite.Merci pour cette solution simple et efficace !
Le tips sur le container dédié « page » au lieu du body à fait la différence !
Laisser un commentaire