28220 sujets

CSS et mise en forme, CSS3

Voila j'ai un problème avec un conteneur et trois contenant. J'ai créé un conteneur div (main) dans lequel j'ai un div (footer) un div (contenu) et un div (footer) qui se met tout en bas de la page.

Voila mon code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
<!--
* {margin:0;padding:0;}  /* annule les marges et padding par défaut des navigateurs */

html,body {height:100%;} /* pour que le html et le body decendent jusqu'au bas de la fenêtre */

#main {
  min-height:100%;  /* fixe la hauteur du contenu au minmum de la hauteur de la fenêtre */
  position:relative;       /* Pour que ce conteneur serve de référence à la position absolue de l'image */
}

#content {
  padding-bottom:2em; /* hauteur du footer */
}

#footer {
  position:absolute;  /* positionne le footer raport au main */
  bottom: 0; left:0;           /* on la place tout en bas */
  text-align:center;
	width:100%;
}
-->
</style>
<!--[if IE]>
  <style type="text/css">
#main {height:100%;}             /* pour faire appliquer un min-height à IE */	
	</style>
<![endif]-->
</head>

<body>
<div id="main">
  <div id="head">head</div>
  <div id="content">contenu</div>
  <div id="footer">footer</div>
</div>
</body>
</html>


Donc j'aimerai que mon contenu prenne tout l'espace disponible entre HEAD et FOOTER. Donc, je voudrai les liés.
Modifié par Roromix (06 Oct 2006 - 09:40)