1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
---
title: Bas de page adhérant
slug: Web/CSS/Layout_cookbook/Sticky_footers
tags:
- CSS
- Guide
- Recette
translation_of: Web/CSS/Layout_cookbook/Sticky_footers
original_slug: Web/CSS/Layout_cookbook/Bas_de_page_adhérant
---
<div>{{CSSRef}}</div>
<p>Un bas de page adhérant est un motif où le bas de page reste en bas de la zone d'affichage (<em>viewport</em>) lorsque le contenu est moins haut que la zone d'affichage. Dans cet article, nous verrons quelques techniques pour parvenir à ce résultat.</p>
<p><img alt="A sticky footer pushed to the bottom of a box" src="cookbook-footer.png"></p>
<h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
<p>Voici les spécifications rapides pour décrire le résultat qu'on souhaite obtenir :</p>
<ul>
<li>Le pied de page est en bas de la zone d'affichage lorsque le contenu est suffisamment petit</li>
<li>Si le contenu est plus grand que la zone d'affichage, le pied de page est situé sous le contenu.</li>
</ul>
<h2 id="Recette">Recette</h2>
<p>{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer.html", '100%', 720)}}</p>
<div class="note">
<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/sticky-footer--download.html">Télécharger cet exemple</a></p>
</div>
<div class="note">
<p><strong>Note :</strong> Dans cet exemple, ainsi que dans le suivant, on utilise un élément enveloppant avec <code>min-height: 100%</code> afin que l'exemple intégré à la page fonctionne. Pour reproduire cela sur une page complète, on peut utiliser {{cssxref("min-height")}} avec la valeur <code>100vh</code> sur l'élément {{htmlelement("body")}} qu'on utilise comme conteneur de grille.</p>
</div>
<h2 id="Choix_effectués">Choix effectués</h2>
<p>Dans l'exemple précédent, on utilise une grille CSS pour réaliser ce bas de page adhérant. L'élément <code>.wrapper</code> a une hauteur minimale de <code>100%</code>, 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.</p>
<p>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 <code>1fr</code> et le pied de page se retrouve dans la troisième région (dimensionnée automatiquement). La piste du milieu, dimensionnée avec <code>1fr</code>, occupera tout l'espace disponible et grandira pour remplir l'espace disponible.</p>
<h2 id="Méthodes_alternatives">Méthodes alternatives</h2>
<p>Si vous devez prendre en charge des navigateurs qui ne permettent pas d'utiliser les grilles CSS, vous pouvez utiliser les boîtes flexibles (<em>flexbox</em>) pour avoir une note de bas de page adhérante.</p>
<p>{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer-flexbox.html", '100%', 720)}}</p>
<p>On commence de la même façon mais on utilise <code>display:flex</code> plutôt que <code>display:grid</code> sur <code>.wrapper</code>. On définit <code>flex-direction</code> avec la valeur <code>column</code> afin d'avoir une organisation verticale. Pour le contenu principal, on utilise <code>flex-grow: 1</code> et pour les deux autres éléments, on utilise <code>flex-shrink: 0</code>. Cela évite de les réduire encore lorsque le contenu remplit la zone principale.</p>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<h4 id="grid-template-rows">grid-template-rows</h4>
<p>{{Compat("css.properties.grid-template-rows")}}</p>
<h4 id="flex-direction">flex-direction</h4>
<p>{{Compat("css.properties.flex-direction")}}</p>
<h4 id="flex-grow">flex-grow</h4>
<p>{{Compat("css.properties.flex-grow")}}</p>
<h4 id="flex-shrink">flex-shrink</h4>
<p>{{Compat("css.properties.flex-shrink")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Les concepts de base des grilles CSS</a></li>
</ul>
|
