[Résolu] <div> conteneur de 100%

Bonjour;

Je cherche une solution pour que mon div conteneur (appelé global dans mon cas) fasse 100% de la page en hauteur, en fonction de ce que je mets dedans.
J'ai donc mis dans ma feuille de style :

body, html{
		height:100%;   
		margin:0;
		padding:0;
		text-align:center;   /* pour corriger le bug de centrage IE */
		font-family: Helvetica, Trebuchet sans-serif;
		background-color:#FFFFFF;
		background-image:url(pattern04.gif);
		}

et j'ai juste déclaré width et pas height pour mon div global :

#global{
		width: 600px;

		text-align: left; 	/* on rétablit l'alignement normal du texte */
		margin-right:auto;
		margin-left:auto;
		margin-top:10px;
		background-color:#e5f0df;
		border:1px solid black;
	}

Sous IE, le div global prend bien toute la hauteur, mais sous firefox le div se réduit à peau de chagrin en haut de la page.

Donc, est-ce que je suis obligé de préciser une hauteur pour mon div global, ou celui ci peut-il s'adapter au contenu ?

Merci
Modifié par Vince82 (30 Apr 2007 - 00:07)

Salut,

il faut définir la hauteur à 100% pour html & body, pour qu'ils occupent toute la hauteur de la fenêtre, puis définir une hauteur minimale pour #global, afin qu'il puisse s'agrandir en fonction de son contenu, si besoin est.

html, body {
   margin: 0;
   padding: 0;
   height: 100%;
}
#global {
   min-height: 100%;
}

Cette solution fonctionne sous IE7, Opéra, Firefox, etc.

Pour IE6, qui en comprend pas min-height, il faut utiliser la propriété height. IE6 interprète en effet la propriété height comme une hauteur minimale et non comme une hauteur fixe. Donc, en commentaires conditionnels pour IE 6 et inférieurs, on ajoute :

#global {
   height: 100%;
}

Attention aux éventuelles marges (intérieures & extérieures) verticales, qui feraient immédiatement apparaitre une barre de défilement si elles sont appliquées à html, body ou #global.

Merci Thomas, ça marche !!

Nouveau probléme. J'ai appliqué une bordure noire autour de mon div global : sous IE la bordure fait bien tout le tour de mon div , mais sous Firefox la bordure s'interrompt à la moitié.
Voilà le code :

#global{
		width: 600px;
                          min-height:100%;
                        /*  height:100%;  */
                          text-align: left; 	
		margin-right:auto;
		margin-left:auto;
		margin-top:10px;
		background-color:#e5f0df;
		border:1px solid black;
	}

C'est un peu incompréhensible pour moi. Si quelqu'un peut m'éclairer ?
Merci

Vince82 a écrit :
Nouveau probléme. J'ai appliqué une bordure noire autour de mon div global : sous IE la bordure fait bien tout le tour de mon div , mais sous Firefox la bordure s'interrompt à la moitié.

En général une bordure ou une couleur de fond ne s'interrompt pas : c'est le bloc lui-même qui s'interrompt. Par exemple parce que son contenu sors du flux du bloc.

Un contenu qui sort du flux, c'est généralement soit un élément positionné en absolu, soit un élément flottant. Vu que tu obtiens un comportement différent dans Internet Explorer, je doute que ça vienne du positionnement absolu.

À vue de nez (et le nez dans le brouillard, vu le peu d'information transmise), je dirais :
- ton conteneur contient un ou des flottants ;
- ces flottants sortent du flux du conteneur -- c'est un comportement parfaitement normal ;
- Internet Explorer ne laisse pas les flottants sortir du conteneur à cause d'un « bug », ou plutôt d'un comportement interne non standard.

À propos des dépassement de flottants : Éléments flottants qui dépassent de l'élément parent.

Si c'est autre chose... il va nous falloir plus d'informations (code HTML et CSS plus complet, ou dans l'idéal une page de test en ligne...).

Effectivement, je n'ai pas positionné mes éléments en absolute mais en flottant. J'ai donc suivi ton lien (super tuto !), et j'ai essayé le overflow:auto qui m'a bien remis ma bordure noire tout autour du div global, mais qui m'a aussi crée une barre de défilement sous le pied de page...alors que ma page est centré et fait 600px de large, trés bizarre ce comportement !

Finalement le display:table a tout arrangé.
Merci Florent, aujourd'hui j'ai appris ce qu'était un flux

Vince82 a écrit :
mais qui m'a aussi crée une barre de défilement sous le pied de page...alors que ma page est centré et fait 600px de large, trés bizarre ce comportement !

C'est pourquoi je lui préfère généralement un bon petit overflow: hidden.

Florent V. a écrit :
C'est pourquoi je lui préfère généralement un bon petit overflow: hidden.

D'autant plus que certaines versions de Firefox ont un problème avec le outline (notamment sur les liens activés) dans un conteneur en overflow: auto.