<div class="c-page__content">
<main class="c-page__main">
The footer is at the bottom even if there is nothing in the page
</main>
<footer class="c-footer" aria-label="Pied de page" role="contentinfo">
<div class="o-container o-container--large">
<h2 class="u-visually-hidden">Pied de page</h2>
<div class="c-footer__main">
<div class="c-footer__page">
<h3 class="u-visually-hidden">Liens connexes</h3>
<nav aria-label="Navigation pied de page">
<ul class="c-footer__list-page">
<li><a href="#nowhere">Mentions légales</a></li>
<li><a href="#nowhere">Plan du site</a></li>
<li><a href="#nowhere">Contact</a></li>
</ul>
</nav>
</div>
<div class="c-footer__social">
<h3 class="u-visually-hidden md:u-not-visually-hidden">Partager</h3>
<nav aria-label="Navigation réseaux sociaux">
<ul class="c-footer__list-social">
<li><a href="#nowhere"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
<path d="M12.5.5C5.9.5.5 5.9.5 12.5s5.4 12 12 12 12-5.4 12-12-5.4-12-12-12zm6 9.7v.4c0 4.5-3.6 8.2-8.1 8.2h-.1c-1.6 0-3.1-.5-4.4-1.3h.7c1.3 0 2.6-.4 3.6-1.2-1.2 0-2.3-.8-2.7-2 .2 0 .4.1.5.1.3 0 .5 0 .8-.1-1.3-.3-2.3-1.5-2.3-2.8.4.2.9.3 1.3.4-.8-.5-1.3-1.4-1.3-2.4 0-.5.1-1 .4-1.5 1.5 1.8 3.6 2.9 6 3-.1-.2-.1-.4-.1-.7 0-1.6 1.3-2.9 2.9-2.9.8 0 1.6.3 2.1.9.6-.1 1.3-.4 1.8-.7-.2.7-.7 1.2-1.3 1.6.6-.1 1.1-.2 1.7-.5-.4.6-.9 1.1-1.5 1.5z" />
</svg>
</a></li>
<li><a href="#nowhere"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
<path d="M24.5 12.6c0-6.7-5.4-12.1-12-12.1S.5 5.9.5 12.6c0 5.9 4.3 11 10.1 11.9v-8.4h-3v-3.5h3V9.9c0-3 1.8-4.7 4.5-4.7.9 0 1.8.1 2.7.2v3h-1.5c-.9-.1-1.8.5-1.9 1.5V12.6h3.3l-.5 3.5h-2.8v8.4c5.8-.9 10.1-6 10.1-11.9z" />
</svg>
</a></li>
<li><a href="#nowhere"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M8.2 11.8L19 .9m0 0l-6.4 18c-.1.3-.4.4-.7.3l-.3-.3-3.4-7-6.9-3.6C1 8.2.9 7.9 1 7.6c.1-.1.1-.2.3-.3L19 .9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a></li>
</ul>
</nav>
</div>
<div class="c-footer__logo">
<h3 class="u-visually-hidden">Logo de l'entité</h3>
<img class="c-logo-entity" src="../../assets/images/logo-entity.png" alt="logo de l'entité" />
</div>
</div>
<div class="c-footer__secondary">
© Name of the service - 2021
</div>
</div>
</footer>
</div>
<div class="c-page__content">
<main class="c-page__main">
The footer is at the bottom even if there is nothing in the page
</main>
{% render '@footer' %}
</div>
/* No context defined. */
/* ======================================================================
# _components.page.css
====================================================================== */
.c-page {
@apply
min-h-screen
bg-white
;
@screen print {
@apply bg-none;
}
}
.c-page__content {
@apply
flex
flex-col
min-h-screen
;
}
.c-page__main {
@apply
flex-grow
;
}
Ce composant pousse le footer en pied de page même si le contenu n’occupe pas toute la hauteur de la page.