Bas de page adhérant

Un bas de page adhérant est un motif où le bas de page reste en bas de la zone d'affichage (viewport) lorsque le contenu est moins haut que la zone d'affichage. Dans cet article, nous verrons quelques techniques pour parvenir à ce résultat.

A sticky footer pushed to the bottom of a box

Spécifications sommaires

Voici les spécifications rapides pour décrire le résultat qu'on souhaite obtenir :

  • Le pied de page est en bas de la zone d'affichage lorsque le contenu est suffisamment petit
  • Si le contenu est plus grand que la zone d'affichage, le pied de page est situé sous le contenu.

Recette

Note : Dans cet exemple, ainsi que dans le suivant, on utilise un élément enveloppant avec min-height: 100% afin que l'exemple intégré à la page fonctionne. Pour reproduire cela sur une page complète, on peut utiliser min-height avec la valeur 100vh sur l'élément <body> qu'on utilise comme conteneur de grille.

Choix effectués

Dans l'exemple précédent, on utilise une grille CSS pour réaliser ce bas de page adhérant. L'élément .wrapper a une hauteur minimale de 100%, ce qui signifie qu'il est aussi grand que le conteneur dans lequel il est placé. On crée ensuite une grille avec une seule colonne et trois lignes, une pour chaque partie de la disposition.

Le placement automatique de la grille placera les objets selon l'ordre du document source. Le titre vient donc se placer sur la première piste (dimensionnée automatiquement), le contenu vient se placer sur la piste 1fr et le pied de page se retrouve dans la troisième région (dimensionnée automatiquement). La piste du milieu, dimensionnée avec 1fr, occupera tout l'espace disponible et grandira pour remplir l'espace disponible.

Méthodes alternatives

Si vous devez prendre en charge des navigateurs qui ne permettent pas d'utiliser les grilles CSS, vous pouvez utiliser les boîtes flexibles (flexbox) pour avoir une note de bas de page adhérante.

On commence de la même façon mais on utilise display:flex plutôt que display:grid sur .wrapper. On définit flex-direction avec la valeur column afin d'avoir une organisation verticale. Pour le contenu principal, on utilise flex-grow: 1 et pour les deux autres éléments, on utilise flex-shrink: 0. Cela évite de les réduire encore lorsque le contenu remplit la zone principale.

Compatibilité des navigateurs

grid-template-rows

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
grid-template-rowsChrome Support complet 57
Support complet 57
Support complet 29
Désactivée
Désactivée From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Support complet 16Firefox Support complet 52
Support complet 52
Aucun support 40 — 59
Désactivée
Désactivée From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet 44
Support complet 44
Support complet 28
Désactivée
Désactivée From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari Support complet 10.1WebView Android Support complet 57Chrome Android Support complet 57
Support complet 57
Support complet 29
Désactivée
Désactivée From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android Support complet 52
Support complet 52
Aucun support 40 — 59
Désactivée
Désactivée From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 43
Support complet 43
Support complet 28
Désactivée
Désactivée From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari iOS Support complet 10.3Samsung Internet Android Support complet 6.0
Animation of tracksChrome Aucun support NonEdge Aucun support NonFirefox Support complet 66IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Support complet 66Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
fit-content()Chrome Support complet 29Edge Support complet 16Firefox Support complet 51IE Aucun support NonOpera Support complet 44Safari Support complet 10.1WebView Android Support complet 57Chrome Android Support complet 57Firefox Android Support complet 51Opera Android Support complet 43Safari iOS Support complet 10.3Samsung Internet Android Support complet 7.0
minmax()Chrome Support complet 57
Support complet 57
Support complet 29
Désactivée
Désactivée From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Support complet 16Firefox Support complet 52
Support complet 52
Aucun support 40 — 59
Désactivée
Désactivée From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet 44
Support complet 44
Support complet 28
Désactivée
Désactivée From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari Support complet 10.1WebView Android Support complet 57Chrome Android Support complet 57
Support complet 57
Support complet 29
Désactivée
Désactivée From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android Support complet 52
Support complet 52
Aucun support 40 — 59
Désactivée
Désactivée From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 43
Support complet 43
Support complet 28
Désactivée
Désactivée From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari iOS Support complet 10.3Samsung Internet Android ?
repeat()Chrome Support complet 57
Support complet 57
Support complet 38
Désactivée
Désactivée From version 38: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Support complet 16Firefox Support partiel 57
Notes
Support partiel 57
Notes
Notes repeat(auto-fill, ...) and repeat(auto-fit, ...) only support one repeated column (see bug 1341507).
Aucun support 52 — 57
Notes
Notes calc() doesn't work in repeat() (see bug 1350069).
Aucun support 40 — 59
Désactivée
Désactivée From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet 44
Support complet 44
Support complet Oui
Désactivée
Désactivée This feature is behind the Enable experimental Web Platform features preference.
Safari Support complet 10.1WebView Android Support complet 57Chrome Android Support complet 57
Support complet 57
Support complet 38
Désactivée
Désactivée From version 38: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android Support complet 52
Support complet 52
Aucun support 40 — 59
Désactivée
Désactivée From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 43
Support complet 43
Support complet Oui
Désactivée
Désactivée This feature is behind the Enable experimental Web Platform features preference.
Safari iOS Support complet 10.3Samsung Internet Android ?
subgrid
Expérimentale
Chrome Aucun support NonEdge Aucun support NonFirefox Support complet 71
Support complet 71
Support complet 69
Notes Désactivée
Notes Enabled by default in Firefox Nightly.
Désactivée From version 69: this feature is behind the layout.css.grid-template-subgrid-value.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Support partiel  
Support partiel
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

flex-direction

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
flex-directionChrome Support complet 29
Support complet 29
Support complet 21
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Support complet 12
Support complet 12
Support complet 12
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Support partiel 20
Notes
Support partiel 20
Notes
Notes Since Firefox 28, multi-line flexbox is supported.
Notes Does not support overflow when using *-reverse. See bug 1042151 for more info.
Aucun support 18 — 20
Désactivée
Désactivée From version 18 until version 20 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Support complet 49
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Support complet 44
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Désactivée From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Support complet 11
Support complet 11
Support complet 10
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -ms-
Opera Support complet 12.1
Support complet 12.1
Support complet 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari Support complet 9
Support complet 9
Support complet 7
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android Support complet 4.4
Support complet 4.4
Support complet ≤37
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android Support complet 29
Support complet 29
Support complet 25
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Android Support partiel 20
Notes
Support partiel 20
Notes
Notes Since Firefox 28, multi-line flexbox is supported.
Notes Does not support overflow when using *-reverse. See bug 1042151 for more info.
Aucun support 18 — 20
Désactivée
Désactivée From version 18 until version 20 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Support complet 49
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Support complet 44
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Désactivée From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 12.1
Support complet 12.1
Support complet 14
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari iOS Support complet 9
Support complet 9
Support complet 7
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Samsung Internet Android ?

Légende

Support complet  
Support complet
Support partiel  
Support partiel
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

flex-grow

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
flex-growChrome Support complet 29
Support complet 29
Support complet 21
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Support complet 12
Support complet 12
Support complet 12
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Support complet 20
Notes
Support complet 20
Notes
Notes Since Firefox 28, multi-line flexbox is supported.
Aucun support 18 — 20
Désactivée
Désactivée From version 18 until version 20 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Support complet 11
Support complet 11
Support complet 10
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : -ms-flex-positive
Opera Support complet 12.1
Support complet 12.1
Support complet 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari Support complet 9
Support complet 9
Support complet 6.1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android Support complet 4.4
Support complet 4.4
Support complet ≤37
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android Support complet 29
Support complet 29
Support complet 25
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Android Support complet 20
Notes
Support complet 20
Notes
Notes Since Firefox 28, multi-line flexbox is supported.
Aucun support 18 — 20
Désactivée
Désactivée From version 18 until version 20 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 12.1
Support complet 12.1
Support complet 14
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari iOS Support complet 9
Support complet 9
Support complet 7
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Samsung Internet Android ?
<0 animate
Non-standard
Chrome Support complet 49Edge Aucun support NonFirefox Support complet 32
Notes
Support complet 32
Notes
Notes Before Firefox 32, Firefox wasn't able to animate values starting or stopping at 0.
IE Aucun support NonOpera Support complet 36Safari Aucun support NonWebView Android Support complet 49Chrome Android Support complet 49Firefox Android Support complet 32
Notes
Support complet 32
Notes
Notes Before Firefox 32, Firefox wasn't able to animate values starting or stopping at 0.
Opera Android Support complet 36Safari iOS Aucun support NonSamsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité utilise un nom non-standard.
Cette fonctionnalité utilise un nom non-standard.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

flex-shrink

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
flex-shrinkChrome Support complet 29
Support complet 29
Support complet 21
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Support complet 12
Support complet 12
Support complet 12
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Support complet 20
Notes
Support complet 20
Notes
Notes Since Firefox 28, multi-line flexbox is supported.
Notes Before Firefox 32, Firefox wasn't able to animate values starting or stopping at 0.
Support complet 49
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Support complet 44
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Désactivée From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Aucun support 18 — 20
Désactivée
Désactivée From version 18 until version 20 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Support complet 10
Notes
Support complet 10
Notes
Notes Internet Explorer 10 uses 0 instead of 1 as the initial value for the flex-shrink property. A workaround is to always set an explicit value for flex-shrink. See Flexbug #6 for more info.
Opera Support complet 12.1
Support complet 12.1
Support complet 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari Support complet 9
Support complet 9
Support complet 8
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android Support complet 4.4
Support complet 4.4
Support complet ≤37
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android Support complet 29
Support complet 29
Support complet 25
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Android Support complet 20
Notes
Support complet 20
Notes
Notes Since Firefox 28, multi-line flexbox is supported.
Notes Before Firefox 32, Firefox wasn't able to animate values starting or stopping at 0.
Support complet 49
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Support complet 44
Préfixée Désactivée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Désactivée From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Aucun support 18 — 20
Désactivée
Désactivée From version 18 until version 20 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 12.1
Support complet 12.1
Support complet 14
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari iOS Support complet 9
Support complet 9
Support complet 8
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Samsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi