Emmanuel Béziat

Emmanuel Béziat

jeune développeur web perpignanais passionné de geekeries

je travaille chez Italic, une chouette web-agency à Paris

je fus également formateur web à l’IDEM, dans le sud plein de soleil

Un site qui prend toute la hauteur disponible

Lorsqu’on crée un design dont la particularité est que le pied de page soit toujours au bas de l’écran, on se heurte à un petit soucis de conception : comment définir une hauteur minimale à la fenêtre ?

Nous allons voir plusieurs solutions possibles, à choisir en fonction de vos besoins.

Ce tutoriel date un peu (2013), mais je suis en train de lui faire une petite remise à jour, incluant de nouvelles méthodes plus modernes et plus efficaces. Je n’ai pas encore détaillé toutes ces nouvelles méthodes, mais le code est disponible.

Tout d’abord, comprenons bien de quoi l’on parle dans ce tutoriel, et pour cela, nous allons d’abord illustrer le problème.

Lorsqu’un site possède une hauteur totale plus grande que l’écran sur lequel il est vu, on peut alors descendre la page vers le bas, jusqu’au bas de la page en question ; là, le défilement est arrêté, le pied-de-page, ou “footer” en anglais, est alors fixé naturellement au bas de la page et de l’écran.

Illustration du tutoriel Illustration du tutoriel

Mais dans le cas où la hauteur totale de la page est inférieure à la hauteur de l’écran, alors le pied-de-page, toujours placé au bas de la page, n’atteint pas le bas de l’écran.

Illustration du tutoriel

Si certains design ne sont pas gênés par cette éventualité, ce n’est pas le cas de tous. Pour palier à ce problème, nous allons devoir faire en sorte que le design adopte la taille du contenu si la taille de la page est supérieure à la taille de l’écran, mais que la taille minimale de la page ne puisse pas être inférieure cette dernière.

Illustration du tutoriel

Nous allons maintenant voir comment faire ceci.

La méthode moderne

Flexbox n’est pas sensé être utilisé pour un gabarit de page, c’est normalement le module CSS grid à qui revient cette charge. Cependant, l’écriture des spécifications de flexbox est presque terminé et la propriété est implémentée dans tous les navigateurs modernes, alors que grid est encore en working draft, et n’est implémenté que dans Internet Explorer 10+ et Edge.

<body>
	<div class="page">
		<header class="site-header"></header>

		<main class="site-content"></main>

		<footer class="site-footer"></footer>
	</div>
</body>

Nous allons donc simplement appliquer display: flex; à body, et spécifier le comportement de ses descendants direct en tant que colonnes. Puis nous diront simplement à .site-content d’utiliser toute la hauteur disponible.

body {
	margin: 0;
}

.page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-content {
	flex: 1;
}

c’est tout !

La méthode de demain

À priori, il viendra un temps où nous utiliserons le module grid afin de faire le squelette de notre site (Et flexbox sera utilisé pour la gestion fine du contenu). Pour en savoir plus, je vous suggère de lire cet article sur Alsacréations.

Rétrocompatibilité (IE 8+)

Voici une méthode utilisant les propriétés display: table-* :

<body>
	<div class="page">
		<header class="site-header"></header>

		<main class="site-content"></main>

		<footer class="site-footer"></footer>
	</div>
</body>
html,
body {
	height: 100%
}

body {
	margin: 0
}

.page {
	display: table;
	width: 100%;
	height: 100%;
}

.site-header,
.site-content,
.site-footer {
	display: table-row
}

Ainsi, on obtient le même résultat, avec moins d’efforts. Il sera toutefois nécessaire de spécifier une hauteur (ou une hauteur maximale) au header et au footer.

Autre méthode (IE9+)

Cette méthode nécessite qu’on connaisse la hauteur du pied de page.

Nous avons besoin de cette base html :

<div class="bloc-principal">
	<div class="site-header"></div>
	<main class="contenu">
	</main>
</div>
<div class="site-footer"></div>

Puis nous allons utiliser une simple astuce à base de vh et de calc(). Pour expliquer très sommairement, vh permet de définir une hauteur relative au viewport (la fenêtre de navigation), et calc() permet de faire une opération simple en CSS. Pour toute information complémentaire, consultez votre moteur de recherche préféré !

Partons du principe que notre pied de page fait ici 40px de haut.

body {
	margin: 0
}

.bloc-principal {
	min-height: calc(100vh - 40px)
}

Hé oui, c’est tout. On dit au bloc principal de faire au minimum la totalité de la hauteur de la fenêtre, moins la hauteur du pied de page. Malin, non ?