Hauteur des div enfants en fonction des parents [Résolu]

[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

[dukej]

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 :

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

[mab07]

Bonjour,

Oui moi je veux bien une explication

Merci

[dukej]

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 , je m'explique

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/

[mab07]

OK Merci

[Boris56]

Parfait, merci.

[Boris56]

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...

Une image par toujours mieux :

Sans overflow :

Avec overflow :

Une idée ?

Merci.

[dukej]

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 et du coup l'alignement des colonnes se fait en javascript. Il n'y a pas de miracle.

[Boris56]

Ok, très bien, merci .