Pied de page systématiquement en bas de l'écran

Cliquez ici pour voir l'effet du positionnement du pied de page dans une page avec peu de contenu.

Structure de la page :

<body>
	<div id="cadre">
		<h1>Titre de la page</h1>
		[... tout le contenu ...]
		<p id="lastelement">Dernier élément</p>
	</div><!-- fin de div#cadre -->

	<div id="piedpage">
		Pied de page
	</div><!-- fin de div#piedpage -->
</body>

Styles CSS :

Seuls les styles indispensables à la structure sont indiqués ici. Les arrangements cosmétiques n'y sont pas, mais peuvent être consultés directement dans le code source de cette page.

<style type="text/css">
	html, body {margin: 0; padding: 0; height: 100%;}

	div#cadre {
		margin: 0 80px;
		padding: 0 10px;
		min-height: 100%;
		background: lightgreen;
	}

	h1 {margin-top: 0;}
	#lastelement {margin-bottom: 0; padding-bottom: 50px;}

	div#piedpage {
		margin-top: -50px;
		height: 50px;
		width: 100%;
		background: red;
	}
</style>

Note : le grand piège à éviter est celui des marges, padding et bordures verticales appliquées aux éléments html et body, et à div#cadre. On les fixera donc à zéro si besoin. De même, on fixe à zéro la marge supérieur du premier élément contenu dans la div#cadreet la marge inférieure du dernier, afin d'éviter des problèmes de fusion des marges.

Correction d'un bug d'Internet Explorer

<!--[if IE]>
	<style type="text/css">div#cadre {height: 100%;}</style>
<![endif]-->

Internet Explorer ne gère pas min-height, mais affecte le même comportement à la propriété height. Pour obtenir un comportement sembable, on passe donc la propriété CSS précédente à IE, via un commentaire conditionnel pour éviter qu'elle ne s'applique aux navigateurs plus respectueux des standards.