Problème lors de l'utilisation d'un min-height

Bonjour à tous.

Cela fait maintenant quelques heures que j'essaie de bricoler ma page afin de pouvoir utiliser un min-height.
Voici la forme de ma page:




Et voici une partie de mon code. Les balises html, body et container:

html {
	height: 100%;
}

body {
	
	margin: 0;
	height:100%;
	font-family:Verdana, Geneva, sans-serif;
	
}

#container {
	
	background:url(pics/fond.jpg);
	height:100%;
	min-height:100%;
	width:1000px;
	margin: 0 auto 100px auto;
	
}

J'utilise donc le Container sur toute ma page. Il me permet d'afficher un fond sur toute la longueur. Ce dont j'ai envie, c'est qu'il prenne quoi qu'il arrive toute la longueur de la page. Bien sûr si ma partie texte est plus longue que la taille du navigateur, le Container doit continuer. Mais malheureusement ce n'est pas ce qui arrive.

Je viens de regarder des 10aines de pages concernant la balise min-height, mais je n'ai rien résolu. Ce que je voudrais aussi, c'est qu'entre le pas de Texte et la fin de la page, mon Container soit visible encore au moins 40px.

Je crois que un des problème est aussi que mon conteneur Texte est plus long que le reste.. Et je n'arrive pas a réparer cela.

Alors si quelqu'un pourrait juste m'éclaircir, ça serait vraiment gentil!

Est-ce que ton height:100% et min-height:100% pour #container n'est pas un peu contradictoire ?
min-height:100% devrait suffire non ?

Merci de votre réponse,

sur les différentes pages où l'on parlait de min-height, les infos étaient assez contradictoires. Certaines pages disaient qu'il fallait aussi renseigner height, et max-height, don c'est pour ça il y a des restes dans mon css. Mais je viens à nouveau de vérifier et ça ne marche pas. Avec min-height tout seul, le container s'affiche sur toute la longueur du navigateur, mais mon Texte dépasse.... c'est vrai assez bizarre.

Est-ce que mon container Texte doit disposer d'un style spécifique pour ne pas qu'il dépasse?

Hello Kass et bienvenue,

du code css sans le code html correspondant c'est un peu comme du code html sans le code css correspondant : il en manque un bout !

oui c'est logique

donc voici la disposition de la page html:

<div id="container">
	
 
 	<div id="partie_gauche">

		<div id="texte">
                
                
                		mon contenu blablabma
                    
                
                </div>
                

	</div>
        
        <div id="menu">

				
                <div class="bio">
                 		
                 		  
                  
                 <div class="work">
                  		
                  		  
                </div>
                
                <div class="contact">
                  		
                  		  
                </div>
          
        </div>
        
           
</div>

Lorsqu'il y a peu de contenu, mon conteneur Texte prend la forme du texte, et mon fond prend bien toute la page, c'est parfait, mais dès que le contenu dépasse la taille de l'affichage dans le navigateur, et bien là mon Container ne suit pas.

        <div id="menu">

                <div class="bio">
                 		
                 <div class="work">                  		                  		  
                </div>
                
                <div class="contact">                  		                 		  
                </div>
          
        </div>

Si ton copier/coller de code est bon, la fermeture des div ne l'est pas...
Ta <div class="bio"> n'est pas fermé ou <div id="menu"> au choix...
mais d'après l'indentation du code c'est la première division citée qui n'est pas sa balise de fermeture.
Est-ce que cela suffit à rétablir la situation ?
Modifié par PiR2 (27 Feb 2009 - 13:41)

Malheureusement ce n'est pas ça.
C'est juste qu'après le copier/coller j'ai effacé un de mes commentaire, et sans faire exprès effacé le </div>

Je copie tout le même le reste de mon css:

#menu {
	width:220px;
	float:right;
	height:100%;
}

#menu .bio {
	margin: 0 1px;
	background-color:#FF01AC;
	width:72px;
	float:left;
	height:100%;
}


#menu .work {	
	margin: 0 0 0 0;
	background-color:#00FFFF;
	width:72px;
	float:left;
	height:100%;
}


#menu .contact {
	margin:0 1px;
	background-color:#7AFF00;
	width:72px;
	float:left;
	height:100%;
}

#partie_gauche {
	width:780px;
	margin:0;
	float:left;
	height:100%;
}


#texte {
	margin: 30px 20px 20px 20px;
	padding: 5px;
	background-color:#FFFFFF;
}

Modifié par Kass (27 Feb 2009 - 13:54)

Je dirais qu'il s'agit d'un dépassement des flottants.

Correction :

#container {
	...
	min-height:100%;
	overflow: hidden;
}

(en n'oubliant pas de supprimer le height:100%;)
Modifié par Heyoan (27 Feb 2009 - 14:06)

Ah parfait ça marche parfaitement avec ça !
Merci énormément

Cependant, il y a encore un petit problème. Je voudrais que mon conteneur Menu prenne lui aussi toute la hauteur de Container. Même lorsque je mets en height:100% (100% du parent, donc de Container, normalement ça devrait prendre toute la hauteur?), sa hauteur s'adapte au contenu. Chose qui n'arrivait pas quand j'utilisais seulement height dans mon Container.