Position d'un bloc en bas de page ou fenetre

elekaj34

1 Mar 2011 à 14:56

Bonjour,

Je voudrais que mon div "pied" se situe en bas de page ... donc si le contenu de la page (+ le contenu du div top) prend moins que la hauteur de la fenetre du navigateur, le bloc pied doit etre en bas de la fenetre du navigateur. Dans le cas contraire, la bloc devra être en bas de page (et pas de la fenetre).

J'avais bricolé un truc à base de JS pour ajuster la hauteur du bloc "page", mais je trouve pas cela très "propre" et en plus ca bug ... parfois l'ajustement merde grave. Donc je voudrais faire cela en CSS, car je crois que c'est possible.

Voici le HTML :

<!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="#LANG" lang="#LANG" dir="#LANG_DIR">
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	</head>
	
	<body>
		<div id="top">
			Le contenu du haut de page
		</div>
		<div class="nettoyeur"></div>
		<div id="page">
			Le contenu de la page
		</div>
		<div class="nettoyeur"></div>
		<div id="pied">
			Le contenu du pied de page
		</div>
	</body>
</html>

et le css

* { margin: 0px; padding: 0px;}
html {
	height: 100%;
}
body {
	width: 100%;
	height: 100%;
}
#page {
	width: 100%;
}
#top { 
	width: 600px;
	height: 130px;
	float: right;
}
#pied {
	background: url(images/pied.png);
	font-size: 0.8em;
	color: #cecece;
	text-align: center;
	padding: 12px 50px;
	position: absolute;
	bottom: 0px;
	width: 99%;
}
.nettoyeur { clear: both; }

Merci pour votre aide
Modifié par elekaj34 (01 Mar 2011 - 14:57)

CSS et mise en forme, CSS3

Position d'un bloc en bas de page ou fenetre