[Résolu]Hauteur 100% dans un conteneur

Bonsoir à tous,

Voilà mon premier soir à me pencher sur le CSS est arrivé. Après quelques tutoriaux, je décide de me lancer. Je rencontre maintenant un problème. J'ai donc parcouru le site, la FAQ mais je n'arrive pas à résoudre mon problème.

Voila le résultat recherché:


J'ai donc créé un conteneur qui occupe 100% de l'espace visible sur le navigateur, un div pour le haut et un autre pour le bas :

<div id="page_entiere">

   <div id="menu_haut">Menu !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>

   <div id="image_milieu">sqdfsd</div>

   <div id="ligne_bas">Ligne du bas</div>

  </div>

Et maintenant, j'ai essayé de les positionner avec le CSS :

html, body {
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
}

#page_entiere {
	height: 100%;
	width: 100%;
	background-color: #d6ffdd;
}

#menu_haut {
	height: 30px;
	width: 100%;
	background-color: #d6dbdd;
}

#image_milieu {
	width: 100%;
	height: 100%;
	background-color: #000000;
}

#ligne_bas {	
	height: 30px;
	width: 100%;
	background-color: #d6dbdd;	
}

Mon "ligne_bas" sort de la page et fait apparaitre une scrollbar.

Pouvez vous me dire comment essayer de faire ça ?
Modifié par Juli3n (22 Sep 2009 - 19:08)

Bonjour,

Pas de barre de défilement, un en-tête et un pied de page visibles en permanence... hum, je sens venir le site pas utilisable.

Techniquement, tu peux:
- Positionner en-tête et pied de page en absolu, de même pour le bloc central.
- Ou encore, utiliser le positionnement fixe.

Pour positionner le bloc central, tu peux par exemple faire:

#centre {
  position: fixed;
  top: 50px;
  bottom: 30px;
  left: 0;
  right: 0;
}

Et paf, le bloc se dimensionnera tout seul par magie, en fonction des limites de la zone d'affichage du navigateur (viewport), grâce aux 4 coordonnées.

Petit problème sympathique: même pas en rêve que c'est compatible avec Papy IE6. (Ça marche dans IE7, par contre.)

Avec le positionnement absolu plutôt que le positionnement fixe, ça passe déjà mieux dans IE6. Par contre pour dimensionner le bloc central ça sera forcément 100% de la hauteur du viewport, le coup des 4 coordonnées ne fonctionnant pas. Ou alors il faudra faire le calcul en JavaScript juste pour IE6.

Salut,

Florent V. a écrit :
Avec le positionnement absolu plutôt que le positionnement fixe, ça passe déjà mieux dans IE6. Par contre pour dimensionner le bloc central ça sera forcément 100% de la hauteur du viewport, le coup des 4 coordonnées ne fonctionnant pas. Ou alors il faudra faire le calcul en JavaScript juste pour IE6.

Il me semble que l'on peut rajouter un niveau d'imbrication pour éviter de passer par du Javascript.
Dans l'idée, le bloc central prend 100% en hauteur sans marges intérieures ou extérieures et un autre bloc directement enfant sans hauteur définie prend alors des marges intérieures (pour éviter la fusion des marges) haute et basse égales à la hauteur des deux blocs haut et bas.

Agylus a écrit :
Salut,

Il me semble que l'on peut rajouter un niveau d'imbrication pour éviter de passer par du Javascript.
Dans l'idée, le bloc central prend 100% en hauteur sans marges intérieures ou extérieures et un autre bloc directement enfant sans hauteur définie prend alors des marges intérieures (pour éviter la fusion des marges) haute et basse égales à la hauteur des deux blocs haut et bas.

Une methode (un peu differente de ce que tu decris : imbrication , padding au 1er niveau et height 100% sur le second ) oblige a faire basculer IE en mode quirk pour y parvenir , c'est plutot une mauvaise idée a mon avis , tout d'abord car si ça peu convenir a IE6 , ç'est genant pour les autres ... ensuite , c'est une mauvaise approche tout court encore plus aujourd'hui qu'hier .

GC

<edit> quitte a faire un truc qui va tenir la route , il ya le doctype : frameset en html ou xhtml qui n'est pas interdit d'utiliser ou le tableau à 3 lignes , alternative qui lui est aussi solide pour ce genre de rendu .</>
Modifié par gc-nomade (31 Aug 2009 - 15:32)

Merci pour vos réponses. Je m'y remets ce soir ! Je vous tiens au courant.

Après plusieurs semaine sans rien toucher, j'ai enfin essayé avec succès de mettre en place vos conseils. Le positionnement absolu fonction à merveille !

Merci beaucoup !