[Rélosu] Contenu court et hauteur div

Bonjour, j'ai un petit soucis au niveau de la hauteur de mon div central lorsque le contenu est court.

Je voudrai que mon design prenne au minimum toute la hauteur de la page.

j'ai suivi ce tuto http://covertprestige.info/css/page-hauteur-100/

mais je n'arrive pas à l'adapter.

Voici ma structure html:

<div id="header"> 

</div>

<div id="conteneur">   

   <div id="center"> 

      <div id="left">

      </div> 

      <div id="content"> 

      </div> 

   </div> 

</div> 

<div id="footer"> 

</div> 

et mon css:

html,body {margin:0;padding:0;height:100%;background-color:#F7F7F7;}  
#header { 
	margin-bottom: 30px;
	background-color:#000;
	height: 58px;
} 
#conteneur {  
	width:998px; 
	margin:auto;
}
#center { 
	overflow:hidden; 
	width:100%; 
} 
#left { 
	float:left; 
	width:250px; 
	background-color: #F2F2F2;
	border:1px solid #CCC;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin-bottom: 20px;
} 
#content { 
	margin-left:270px; 
	margin-bottom:20px;
	border: 1px solid #CCC;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
} 
#footer { 
	width:100%;
	background-color:#000;
	height:150px;
} 

Lorsque je suis le tuto indiqué plus haut, mon footer recouvre le contenu lorsque celui est plus long. Auriez vous une idée ?

Merci.

Edit: Je viens de m’apercevoir en surfant sur le site du tuto qu'il date de 2006. C'est sans doutes la raison. Je cherche sur le net pour un tuto plus récent mais c'est apparemment assez rare.
Modifié par Zahn (13 Oct 2011 - 15:18)

Oui attention aux tutos mis en avant sur google, ils sont pour la plupart dépassés. Ils étaient sûrement très bonS quand ils sont sortis d'où le référencement.
Ballade-toi sur ce site et tu trouveras des tutos relativement à jour.

Essaie un :

min-height:100%;

Sinon regarde là
Modifié par jmlapam (24 Sep 2011 - 15:04)

Je viens de réussir ! Encore grâce à alsacréation et ce magnifique tuto http://www.alsacreations.com/tuto/lire/564-Design-XHTML-CSS-complet-avec-2-colonnes-de-meme-hauteur.html

je n'ai plus qu'a peaufiner pour IE et autres navigateurs.

Pour la solution, je devais englober tout mon design dans un div#global en min-height 100% et postion relative.

voici le css modifié:

html,body {margin:0;padding:0;height:100%;background-color:#F7F7F7;}  
#global{
	min-height: 100%;
	position: relative;
}
#header { 
	margin-bottom: 30px;
	background-color:#000;
	height: 58px;
} 
#conteneur {  
	width:998px; 
	margin:auto;
}
#center { 
	overflow:hidden; 
	width:100%; 
	padding-bottom:150px; /* doit être égal à la hauteur du footer, ça empêche le chevauchement */
} 
#left { 
	float:left; 
	width:250px; 
	background-color: #F2F2F2;
	border:1px solid #CCC;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin-bottom: 20px;
} 
#content { 
	margin-left:270px; 
	margin-bottom:20px;
	border: 1px solid #CCC;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
} 
#footer { 
	position: absolute;
	width:100%;
	background-color:#000;
	height:150px;
	bottom: 0;
} 

jmlapam: j'ai vu ton message trop tard, mais merci tout de même pour ce lien très intéressant.

Mets un [résolu] dans le titre du sujet
Modifié par jmlapam (24 Sep 2011 - 16:06)