Pied de page simple

Principe directeur: Être cohérent.

Quand utiliser cette composante

Les applications et les sites secondaires de l’Ontario doivent tous comprendre au moins un pied de page simple au bas de chaque page.

Le pied de page simple est la norme dans l’ensemble des services numériques ontariens. Il associe l’image de marque de l’Ontario à votre produit, tout en fournissant des liens obligatoires vers des pages contenant des renseignements essentiels sur le gouvernement ontarien.

Pied de page développé

Utilisez le pied de page développé si vous avez besoin d’indiquer des liens supplémentaires vers des sites spécifiques ou des réseaux sociaux approuvés.

Caractéristiques

Le pied de page simple comporte :

• la barre noire avec mention de marque en supergraphique
• les liens obligatoires :
  • accessibilité
  • confidentialité
  • contactez-nous (lien vers la personne-ressource de votre propre application ou site)
  • Imprimeur du Roi pour l’Ontario
• un lien facultatif :
  • Conditions d’utilisation (lien vers les Conditions d’utilisation d’ontario.ca ou aux conditions d’utilisation spécifiques à votre service, le cas échéant)

Pratiques exemplaires

À faire

• Mettre à jour le lien « Contactez-nous » pour le diriger vers la personne-ressource de votre propre service (p. ex., un formulaire ou une adresse de courriel).
• S’assurer que le pied de page est ancré au bas de l’écran.

À ne pas faire

• Ajouter des liens supplémentaires au pied de page – s’il faut donner plus d’information, utiliser le pied de page développé.

Note technique

Le pied de page est le dernier élément de la page; d’où l’importance de le placer tout au bas du contenu.

Si le contenu est plus court que la taille de la clôture, placer le pied de page tout au bas de la clôture.

Lorsque le contenu est plus court que la taille de la clôture, il arrive que le pied de page remonte et reste coincé au bas du contenu principal, au lieu de demeurer ancré dans la partie inférieure de la clôture. Quelques manipulations avec CSS pourraient prévenir ce genre de problème.

À faire :

---

À ne pas faire :

---

Option 1

Pour commencer, voici un exemple de document index.html :

<div class="“ontario-container”">
    <div class="“ontario-content-wrapper”">
        <h1>Lorem Ipsum</h1>
        <p>
            What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
            1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
            electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
            recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
    </div>
    <footer class="ontario-footer">
        <p>Hey this is a footer</p>
    </footer>
</div>

Dans votre CSS, ajoutez ensuite les styles suivants pour vos différentes composantes :

.ontario-container {
    position: relative;
    min-height: 100vh;
}

.ontario-content-wrapper {
    padding-bottom: 2.5rem; /* Footer height */
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2.5rem; /* Footer height */
}

Visitez le site freeCodeCamp (en anglais) pour savoir si cette option vous convient.

Option 2

Si vous utilisez un module Flexbox, vous devrez peut-être appliquer le code margin-top: auto à la composante pied de page.

Cela permet d’agrandir automatiquement la marge du pied de page de manière à ce qu’il occupe l’espace restant du conteneur parent, à condition qu’il soit affiché au moyen de Flexbox.

Consultez le site CSS-Tricks (en anglais) pour savoir si cette option vous convient.