Hauteur des div enfants en fonction des parents

Bonsoir,

Cherchant comment mettre les hauteurs des div enfants en fonction des parents, je suis tombé sur le FAQ du site :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

html, body { margin : 0; padding : 0; height : 100%; }   #parent { height : 100%; background : green; }   #enfant { height : 50%; background : red; }

---

Cela fait exactement se que je souhaite sauf que le souci est que le html en height: 100% lui fait prendre la valeur de ce que peut afficher l'écran ce qui fait que seul une partie du contenu de la div enfant est afficher....

Quelqu'un aurait-il une solution ?
Merci

Citation:

---

Envoyé par Boris56

Bonsoir,

Cherchant comment mettre les hauteurs des div enfants en fonction des parents, je suis tombé sur le FAQ du site :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

html, body { margin : 0; padding : 0; height : 100%; }   #parent { height : 100%; background : green; }   #enfant { height : 50%; background : red; }

---

Cela fait exactement se que je souhaite sauf que le souci est que le html en height: 100% lui fait prendre la valeur de ce que peut afficher l'écran ce qui fait que seul une partie du contenu de la div enfant est afficher....

Quelqu'un aurait-il une solution ?
Merci

---

Malheureusement la faq n'a pas la réponse absolue à la question :
Et comment je fais si je ne veux pas de hauteur figée sur le parent principal ?
Et là il n'y a pas 36 solutions :
Soit tu oublies IE et tu fais à coup de display:table, soit tu passes par le petit hack des familles :) qui marche partoooouuuuut

Aller hop démo ici : http://jsfiddle.net/Gatsu35/pJgUj/

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<div id="page"> <div id="header">header :)</div> <div id="content"> <div id="leftNav"> left nav </div> <div id="rightNav"> right nav </div> <div id="main"> main<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>main bottom </div> </div> </div>

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

#header { background:yellow; }   #content,#main { overflow:hidden; zoom:1; }   #leftNav,#rightNav { padding-bottom:32000px; margin-bottom:-32000px; }   #leftNav { float:left; width:200px; background:green; }   #rightNav { float:right; width:100px; background:blue; }   #main { background:red; }

---

Si tu vous voulez une explication détaillée et précise qui irait bien dans la FAQ, je vous la ferai :)

Bonjour,

Oui moi je veux bien une explication

Merci

Première chose important, poser la structure :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<div id="page"> <div id="header">header :)</div> <div id="content"> <div id="leftNav"> left nav </div> <div id="rightNav"> right nav </div> <div id="main"> main<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>main bottom </div> </div> </div>

---

#page est mon conteneur principal, je ne mets une large que sur celui-ci, le reste (ses enfants) viennent prendre le reste de la largeur.
Ensuite je défini un "#header" ici il ne sert à rien, juste pour la déco.
Après j'attaque les colonnes, celle-ci seront contenues dans un div #content. Ce n'est pas un div de "trop" il m'est très utile pour conserver une consistance sur le site.
Ensuite je pose mes colonnes, je mets #leftNav et #rightNav avant #main pour une raison de commodité, oui, #main prend le reste de la largeur et comme je ne le flotte pas il prend le reste de la place entre les 2 éléments flottés.

#content et #main :
C'est deux éléments vont avoir un traitement particulier. Je vais leur appliquer le contexte de formatage via "overflow:hidden" cela me permet de régler 2 problèmes :
- #content fera la hauteur de son contenu, même si tous ses éléments sont flottés (float)
- #main viendra se caller proprement par rapport à #leftNav et #rightNav, ainsi pas besoin d'appliquer de "margin-left" ou "margin-right"

Pour IE, le contexte de formatage s'applique en forçant le "hasLayout", et pour ça je rajoute juste "zoom:1"
Plus d'informations sur le contexte de formatage :
http://www.blog-and-blues.org/articl...s_de_formatage

#leftNav et #rightNav
Je les float simplement : float:left, et float:right, ce qui vient les placer respectivement ) à gauche et à droite de #main.

Alignement en hauteur
Alors là j'utilise une technique de sioux :D, je m'explique :D

En gros l'idée c'est de forcer les boîtes à avoir une énorme hauteur via le "padding-bottom:32000px", sauf que du coup la page va faire 32000px de haut, et c'est là que la technique magique apparaît. Grâce au "margin-bottom:-32000px", physiquement je retire le padding de 32000px avec mon margin-bottom négatif, du coup le bloc ne fait que la hauteur de son contenu. Sauf que, #content qui entoure les colonnes cache grâce au overflow:hidden le contenu virtuellement ajouté via le padding-bottom et supprimé via le margin-bottom.
enlevez le overflow:hidden sur #content et vous comprendrez :)

Je vais simplement résumer en disant que les colonnes s'alignent virtuellement mais pas physiquement.

Au final notre CSS est ainsi :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

/** couleurs pour la demo **/ #header {background:yellow;} #main {background:red;} #leftNav*{background:green;} #rightNav*{background:blue;}   /** structure des colonnes **/ #content,#main { /* contexte de formatage */ overflow:hidden; zoom:1; }   #leftNav,#rightNav, #main {/* technique sioux pour aligner les colonnes */ padding-bottom:32000px; margin-bottom:-32000px; }   #leftNav { /* nav left donc float:left */ float:left; width:200px; }   #rightNav { /* nav right donc float:right */ float:right; width:100px; }

---

MAIS CETTE TECHNIQUE N'EST PAS EXEMPTE DE BUGS
Bug avec les ancres (#blabla)
Si vous avez un id dans votre page et que vous pointez via un lien internet (#ancre) le contenu de votre page vous aurez des effets indésirables du fait du overflow:hidden et de la mega hauteur que fait son contenu, c'est valable pour tous les navigateurs sauf IE6 et 7

Background avec un background-position:bottom
Comme nos colonnes font virtuellement 32000px de haut, le background-image positionné en bottom ne s'affichera pas, sauf tout en bas du block donc 32000px plus bas.


Je déconseille donc cette technique sur des gros sites à gros trafic avec énormément de contenus ou pages différentes.

Résultat final :)
http://jsfiddle.net/Gatsu35/pJgUj/

OK Merci

Parfait, merci. ;)

Hum, il y a une petit souci...

Dans ma div main j'ai des div en absolute qui normalement sorte de cadre, hors avec le overflow: hidden ces div n'apparaissent plus...:aie:

Une image par toujours mieux :

Sans overflow : http://www.presse-minute.net/menu_avant.jpg

Avec overflow : http://www.presse-minute.net/menu_apres.jpg

Une idée ?

Merci.

Je l'ai dis, cette technique est chiante et là tu rencontre le problème.
C'est pour ça que je suis passé à autre chose :D et du coup l'alignement des colonnes se fait en javascript. Il n'y a pas de miracle.

Ok, très bien, merci ;).