Coller le pied de page en bas

Ce petit tutoriel va vous apprendre une technique toute simple pour faire en sorte que votre pied de page reste collé en bas de page quelque soit la hauteur de votre contenu. Les outils seront HTML et CSS.

demo source

Code HTML

Pour commencer, regardons la globalité du code HTML. Vous pouvez le récupérer. Nous reviendrons dessus plus tard.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>

<body>
<div id="superglobal">
<div id="global">
<h1>Mon pied de page reste en bas</h1>


Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum.
ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas,
et alioqui coalito more in ordinarias dignitates asperum semper et saevum,
ut satisfaceret atque monstraret, quam ob causam annonae convectio sit impedita.
			
</div>
<div id="pied">
<h1>Mon pied</h1>
</div>
</div>

</body>
</html>

Code CSS

Maintenant le code CSS

*{
	margin: 0;
	padding: 0;
}

html{
	height: 100%;
}

body {
	height: 100%;
}

#superglobal{
	position : relative;
	min-height: 100%;
}

#global{
	position: relative;
        min-height: 100%;
	margin: 0 auto;
	padding-bottom: 70px;
	width: 600px;
}

#pied{
	position: absolute;
	bottom: 0px;
	height: 50px;
	width: 100%;
	background: url('images/bg_pied.png') repeat-x;
}

/*------------ déco ------------*/

#global h1{
	text-indent: -9999px;
	width: 600px;
	height: 100px;
	background: url('images/bg_header.png');
}

#pied h1{
	text-indent: -9999px;
	width: 300px;
	height: 50px;
	margin: 0 auto;
	background: url('images/bg_pied_h1.png');
}

Explication du code

<body>
<div id="superglobal">
<div id="global">

Par habitude, j’encapsule tout mon code HTML dans une div que je nomme global. Pourquoi. Et bien tout simplement, lorsque je désire centrer mon contenu, j’ai simplement à centrer ma div global par le code CSS margin:0 auto;. Mais si je donne une largeur fixe à cette div global, je ne peux pas faire que mon pied de page soit aussi large que mon écran. C’est pourquoi, pour cet exemple, j’encapsule ma div global dans une div que je nomme superglogal avec les propriétés CSS que nous verrons après.

</div>

	<!-- fin global -->
<div id="pied">
<h1>Mon pied</h1>
</div>
</div>

 <!-- fin superglobal -->
</body>
</html>

Du coup, je met ma div pied uniquement dans la superglobal pour que celui-ci ne réagisse uniquement à la largeur de la superglobal.

html{
	height: 100%;
}

body {
	height: 100%;
}

#superglobal{
	position : relative;
	min-height: 100%;
}

#global{
	position: relative;
	min-height: 100%;
	margin: 0 auto;
	padding-bottom: 70px;
	width: 600px;
}

Il est très important de suivre ce code à la lettre. Tout dabord il faut fixer les tailles du body et de html. Celles-ci en height: 100%; pour prendre tout l’écran. Puis la superglobal en position: relative; et min-height: 100%; pour qu’elle puisse s’étendre en fonction du contenu mais qu’elle est aussi sa place bien à elle.

Pareil pour la div global. Par contre pour celle-ci, on lui rajoute padding-bottom: 70px; pour que le pied, lorsque votre fenêtre de navigateur est réduite, ne vienne pas cacher votre contenu. La valeur de votre padding-bottom correspond à la hauteur que vous aurez donné à votre pied. Si votre pied fait 200px, la valeur du padding devra être au minimum égale à 200px.

#pied{
	position: absolute;
	bottom: 0px;
	height: 50px;
	width: 100%;
	background: url('images/bg_pied.png') repeat-x;
}

Pour finir, regardons le code de la div pied. position: absolute; pour qu’il ne réagisse qu’en fonction de son parent et ne laisse pas de trace invisible et décale tout le reste. bottom: 0; pour qu’il se plaque en bas de la page et y reste. Sans oublier height: 50px; sa hauteur fixe.

Voila pour ce tutoriel. N’hésitez pas à améliorer ce code et surtout à faire quelque chose de bon à voir.

Vous avez peut être manqué ces articles :

Refaire un menu style Apple en CSS
(17/03/2009)
Initiation à Ajax avec Jquery (partie 2)
(16/03/2009)
Galerie Snoupix Flip
(02/02/2009)

Son portfolio

A propos de Snoupix

5 commentaires

S'abonner au RSS des commentaires

Répondre

leymiris
Posté le 21/06/2010 à 18h07

Hello,
Je me suis retrouver dans la même situation ou, avec des div supplémentaire dans le global et afin de régler le soucis du pied-de-page qui passe par dessus les div j’ai ajouté

<div style="clear:both"></div>

Juste avant celui-ci, ce qui à régler le soucis pour moi
Répondre

day-n
Posté le 04/04/2009 à 0h40

Bonjour,

Si on veut rajouter du contenu flottant dans le bloc "global", le "pied" ne se colle plus au bas de la page, quelqu’un serait comment faire?

<div id="superglobal">
<div id="global">
<div id="contenu">
<!– flottant à gauche –>
</div>

<div id="colonne_droite">
<!– flottant à droite –>
</div>
</div>
<div id="pied">

</div>
</div>

J’aimerais réalisé une structure à peu près comme celle de ce site.

Merci d’avance
Répondre

Stephane
Posté le 25/03/2009 à 15h40

Merci pour le lien, les gabarits sont bien fait et peuvent être très utiles.
Répondre

gcyrillus
Posté le 24/03/2009 à 17h20

Bonjour,

Pour completer ce tutoriel j’ajouterais ceux-ci :
http://yidille.free.fr/plux/valign/?9-pied-en-bas-de-fenetre

Ou l’on peut faire le choix d’avoir un entete et ou pied en position fixe ou coulissante .

La page demontre aussi que les techniques mise en oeuvre pour placer un pied au plus haut au bas de son conteneu (fenetre du navigateur) , fonctionne tout aussi bien dans un element ou portion de pages et est réutilisable , comme un "objet" .

Amateurs de gabarits , ce site en propose d’autres qui se veulent débuggé pour IE 6/7 , FF2 et inferieurs …

GC
Répondre

Tazzytazz
Posté le 17/02/2009 à 18h43

[citation][de]Réponse à François:[/de]Super ca marche pas sur Firefox 1.5…grrr!!!!!

rooo la boutade [/citation]

Et tu peux pas télécharger un autre Firefox ? ^^

Coller le pied de page en bas

Code HTML

Code CSS

Explication du code

Vous avez peut être manqué ces articles :

Refaire un menu style Apple en CSS

Initiation à Ajax avec Jquery (partie 2)

Galerie Snoupix Flip

5 commentaires

Laisser un commentaire Cancel reply