Discussion :

[manu-lyon]

Bonjour à tous,

J'ai un petit souci avec la hauteur de mes div flottante en %.
J'ai une div 'global' qui contient toutes les autres div :
'header',
'header',
'middle',
'footer'
et 2 div de décoration 'left' et 'right' paramétrées respectivement en float:left et float:right pour faire un effet d'ombre sur les cotés de ma colonne (dans ces div il y a une image répétée verticalement).

C'est avec ces 2 div flottantes que j'ai un problème. Elle ne prennent pas toute la taille de ma div global. Si je spécifie une taille en px pas de problème elles apparraissent bien. Mais mon contenu est variable donc j'aimerais que ces div prennent 100% de la div global ! si je met height:100% dans ces div elle n'apparaissent pas sous Firefox et sont minuscule (environ 10px) sous IE.
Quelqu'un aurait une idée ?

Merci !

Code CSS :

@charset "utf-8";
/* CSS Document */

html,body{
background-color:#CCCCCC;
height:100%;
margin-top:0px;
margin-bottom:0px;
font-family: Arial, Helvetica, sans-serif;
font-size:13px;
}

div#global{
min-height:100%;
background-color:#999999;
margin-right:auto;
margin-left:auto;
width:732px;


}


div#left{


width:15px;
background-image:url(img/motif_divgauche.jpg);
background-repeat:repeat-y;
float:left;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000000;
}

div#right{


width:15px;
background-image:url(img/motif_divdroite.jpg);
background-repeat:repeat-y;
float:right;

border-left-width: 1px;
border-left-style: solid;
border-left-color: #000000;
}


div#header{
width:700px;
height:155px;
margin-left:auto;
margin-right:auto;
background-image:url(img/banniere.jpg);
}

div#menu{
background-image:url(img/fond_menu.jpg);
text-align:center;
width:700px;
height:45px;
margin-left:auto;
margin-right:auto;
background-color:#FFFFFF;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
}

div#middle{
min-height:70%;
width:700px;
margin-left:auto;
margin-right:auto;
background-color:#D6D6D6;
}


div#footer {
height:50px;

width:700px;
margin-left:auto;
margin-right:auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: italic;
text-align:center;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000000;
}

et le html :

<div id="global">
<div id="left"></div>
<div id="right"></div>
<div id="header"></div>
<div id="menu"></div>
<div id="middle">
test
</div>
<div id="footer"></div>
</div>

[Macmillenium]

Bonsoir,

la hauteur en % ne peut être appliquée que sur des éléments dans le flux naturel ou positionné en absolute, relative et fixed. Pas en float.

[manu-lyon]

d'accord, merci pour cette précision.

Il y a-t-il un moyen de contournement ?

[Macmillenium]

Il y a-t-il un moyen de contournement ?

Sa dépend des cas, si c'est une histoire de background, tu peux tricher et mettre une image de 1px d'hauteur qui regroupe tous les background et la répéter sur le bloc conteneur

[manu-lyon]

Voila le rendu sous IE : on voit en haut le début de mes div left et right. Aucun moyen de les faire arriver jusqu'en bas ???

[Macmillenium]

Regarde dans la capture ci-joint, tu prend la partie en rouge (que tu vide à l'intérieur) et tu l'a répète sur la div global.

[manu-lyon]

OK, je vais faire ainsi, ca me parait simple.
Pour ma culture perso il y a d'autres moyens ?

En tout cas merci pour ton aide !

[Macmillenium]

Pour ma culture perso il y a d'autres moyens ?

A part le positionnement absolute relative fixed et les éléments dans le flux ...
Y a aussi la propriété display:inline-block

[Candygirl]

Bonsoir,

la hauteur en % ne peut être appliquée que sur des éléments dans le flux naturel ou positionné en absolute, relative et fixed. Pas en float.

Hello,

As-tu des sources pour appuyer cette déclaration ? Pour ma part je pense que cela n'a rien à voir avec le float, mais avec le fait que le parent doit posséder un height explicite pour qu'un height en % se voit appliqué (ce qui n'est pas le cas ici pour #global):

Spécifie une hauteur en pourcentage. Celui-ci est calculé en fonction du bloc conteneur de la boîte générée. Si la hauteur du bloc conteneur n'est pas spécifiée explicitement (c.à.d., celle-ci dépendant de la hauteur du contenu), sa valeur est considérée comme étant 'auto' ;

Mais préférer la référence plus récente:

Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. A percentage height on the root element is relative to the initial containing block.

[Macmillenium]

Bonjour,

Pour ma part je pense que cela n'a rien à voir avec le float, mais avec le fait que le parent doit posséder un height explicite pour qu'un height en % se voit appliqué (ce qui n'est pas le cas ici pour #global):

Oui en effet,
Merci pour ces précisions