28172 sujets

CSS et mise en forme, CSS3

Encore un pb avec mon height=100%

Bonjour à tous !

Je reviens encore avec un pb de height=100%.
j'avais déja trouvé une solution a mon problème avant pour un précedent site mais pas moyen de remettre la main sur la solution.

Alors en fait c'est simple j'ai un conteneur avec un fond blanc que je souhaite voir s'afficher en 100% de la hauteur totale.

J'ai un conteneur qui englobe le header , le menu de gauche , le contenu et le footer comme ceci :
conteneur
header
menugauche contenu
footer
fin conteneur

voilà le screenshot de mon problème (identique sur IE), en gros le fond blanc du conteneur ne va pas jusqu'au bout ! :

upload/14589-screen.jpg

le css :


<!--

html {
	 height:100%;
}
body {
	text-align: center; /* pour corriger le bug de centrage IE */
	 background:#cccccc;
	 height:100%;
	 margin:0;
	 padding:0;
     }

#conteneur{
	margin-left: auto;
	margin-right: auto;
	width:909px;
	height:100%;
	background-color:#FFFFFF;
	position: relative;


}

#header {
	border-left: thin solid #CCCCCC;
	border-right: thin solid #CCCCCC;
	margin-left:30px;
	margin-right:30px;
	width:849px;
	height:344px;
}

#menugauche{
float:left;
	width:196px;
	height:100%;
	margin-left:30px;
	background:#ededed;
	border-left: thin solid #CCCCCC;
           color : #4b520c;
	font: bold 12px Verdana ;
	padding-top:10px;
}

#contenu {
	float:left;
	margin-left:5px;
	width:648px;
	border-right: thin solid #CCCCCC;
	height:100%;
	background:#ededed;
	color : #4b520c;
	font: 12px Verdana ;
	padding-top:10px;
}

#footer {
	width:906px;
	height:22px;
}

-->


le html :


<body>
<!-- ImageReady Slices (funquad.psd) -->
<div id="conteneur">

	<div id="header">
		<img id="index_03" src="images/index_03.jpg" width="849" height="344" alt="" />
	</div>
	
	<div id="menugauche">
		test
	</div>
	<div id="contenu">
		Lorem ipsum dolor
	</div>
	<div id="footer">
		<img id="index_10" src="images/index_10.jpg" width="906" height="22" alt="" />
	</div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>


Si quelqu'un pourrait m'éclairer ?
merci d'avance !
Modifié par Shooye (21 Nov 2008 - 16:07)
Bonjour Shooye,

La technique du height 100% :

- Spécifier la hauteur dans le conteneur (ici <html> et <body> comme tu l'as fait)
- Ne pas y ajouter de margin et de padding car ils se rajoutent au height 100%, donc apparition de scrollbar.
- Spécifier l'attribut height et min-height de l'élément. La hauteur 100% signifie la hauteur de la fenêtre et non la hauteur de ta page. Donc si la page est plus longue que la hauteur de la fenêtre, on n'a le fond que sur la hauteur de la fenêtre (taille minimum et maximum) et il disparait lors du scroll ou redimensionnement de la page sans refresh. Sauf pour IE6 qui "pousse" son conteneur avec un height 100% tant qu'il a du contenu (bref qu'il interprete comme un min-height, la propriété min-height lui-même lui passant complétement au-dessus Smiley smile ). Voici la syntaxe a utiliser :

#monDiv { height: auto !important; height: 100%; min-height: 100%;}


Le coup du height 100% c'est un grand classique, mais on s'y fait vite Smiley smile
Modifié par K-feine (24 Nov 2008 - 20:19)
Merci K-feine !

J'ai essayé ta technique qui fonctionne plutôt bien pour le conteneur (le fond blanc descend bien jusqu'en bas.
Par contre quand j'applique ce même code pour mes div menugauche et contenu , eux ne descendent pas jusqu'en bas mais s'arrêtent juste après le texte.

As tu une explication ?

Merci ! upload/14589-Sanstitre.jpg

Le code css :


<!--

html {
	 height:100%;
}
body {
	text-align: center; /* pour corriger le bug de centrage IE */
	 background:#cccccc;
	 height:100%;
	 margin:0;
	 padding:0;
     }

#conteneur{
	margin-left: auto;
	margin-right: auto;
	width:909px;
	height: auto !important; 
	height: 100%; 
	min-height: 100%;
	background-color:#FFFFFF;
	position: relative;


}

#header {
	border-left: thin solid #CCCCCC;
	border-right: thin solid #CCCCCC;
	margin-left:30px;
	margin-right:30px;
	width:849px;
	height:344px;
}

#menugauche{
float:left;
	width:196px;
	height: auto !important; 
	height: 100%; 
	min-height: 100%;
	margin-left:30px;
	background:#ededed;
	border-left: thin solid #CCCCCC;
           color : #4b520c;
	font: bold 12px Verdana ;
	padding-top:10px;
}

#contenu {
	float:left;
	margin-left:5px;
	width:648px;
	border-right: thin solid #CCCCCC;
	height: auto !important; 
	height: 100%; 
	min-height: 100%;
	background:#ededed;
	color : #4b520c;
	font: 12px Verdana ;
	padding-top:10px;
}

#footer {
	width:906px;
	height:22px;
}

-->
Salut Shooye.

Alors j'ai teste, j'ai pense que ca pouvait venir du fait du flottement des blocs mais en fait non, effectivement cela ne fonctionne pas.

Il semblerait que le height 100% ne fonctionne que si le conteneur parent est la page elle-meme (<body>) ou si l'element est en position absolute, j'ai egalement teste si #conteneur a une hauteur fixe en pixel, impossible d'avoir un bloc enfant en position relative et d'une hauteur en 100% qui s'y cale.

J'ai trouve ce sujet apres quelques recherches : http://forum.alsacreations.com/topic-1-35569-1-Div-imbriques-et-min-height100.html
Qui n'apporte pas vraiment de solutions mais confirme que ca ne fonctionne pas Smiley smile (la solution donnee par eramaajarvi ne fonctionne effectivement pas).
Ca m'interpelle et je me pencherais la-dessus pour quelques tests Smiley smile


Pour l'instant et pour palier au plus rapide, je te propose cette solution bien souvent utilisee de la feinte du background qui se repete :

Fait une image de 1px du fond que tu veux (donc ici ton fond blanc avec tes bandes grises) et colle le en background repeat-y dans ton conteneur dont la hauteur a 100% fonctionne bien et voila un fake ni vu ni connu. Smiley smile

Tiens moi au courant si tu as besoin de plus d'explications
Sujet clos
Aller à