hauteur variable d'un <div>

[xpatval]

Bonjour,

Ma page est structurée de la manière suivante:

Un conteneur principal-

Un conteneur "left"-

un conteneur "right"-

Un conteneur "head"-

Un conteneur central-

et un conteneur foot.

Mes left et right ont une image de fond, répétitive (background-image, et background-repeat), et sont en position-absolute.

Pour certaines pages ayant cette structure, php me retourne un certain nombre d'éléments dans le conteneur principal, et la hauteur de ce <div> est augmenté en conséquence.

Est-il possible, et comment, d'agarndir la hauteur des div left et right en même temps que la hauteur du conteneur principal ?

Merci,

xpatval

[Compte supprimé]

Laisse l'adresse de ta page avec un exemple, c'est assez difficile de comprendre comme ça...

[xpatval]

Exemple visible ici

(Totally HS): Je ne sais si tu es le faiseur de skitour.fr, mais je suis en tout cas RAVI de voir le dome et la barre des écrins en haut de page... souvenirs souvenirs...

xpatval

Modifié 5 Décembre 2004 par xpatval

[Compte supprimé]

essaie

#left {
...
min-height:100%;
}

(Totally HS): Je ne sais si tu es le faiseur de skitour.fr, mais je suis en tout cas RAVI de voir le dome et la barre des écrins en haut de page... souvenirs souvenirs...

C'est moi

C'est beau les souvenirs....

les miens sont là

[xpatval]

Ben non, ça, ça ne fonctionne pas...

Mes styles sont définis ainsi:

Conteneur principal

#cont {
position: absolute;
width: 100%;
padding:0;
margin:0;
}

gauche:

#left {
background-image: url('commun/t_left.gif');
background-repeat: repeat-y;
position: absolute;
left:0;
width: 150px;
min-height:550px; (<<=== ????)
}

droite:

#right {
position: absolute;
right:0;
width: 149px;
height:550px; (idem que pour le left)
background-image: url('commun/t_right.gif');
background-repeat: repeat-y;
}

conteneur central:

#cent {
min-height: 400px;
margin-left: 150px;
margin-right: 150px;
background-color: #000066;
}

header:

background-image: url('commun/head_1.jpg');
background-repeat: no-repeat;
background-position: right;
height: 100px;
margin-left: 150px;
margin-right: 150px;
padding:0;

et footer:

#foot {
height: 75px;
border: 1px solid #000066;
margin-left: 150px;
margin-right: 150px;
background-color: #000066;
}

Le min-height ne donne qu'une hauteur relative au contenu du <div> ...

xpatval

[Compte supprimé]

Ton problème est bien celui du fond bleu clair qui ne descend pas au niveau du div central ?

J'ai testé sur Firefox, et avec le min-height: 100%, ça fonctionne.

T'as testé sous ie ? je crois savoir qu'il de comprends pas cet attribut.

essaie height: 100% (ça marche sour firefox)

[xpatval]

Je teste avec quatre browsers:

Sous Firefox, le min-height fonctionne.

Sous Netscape, idem.

Sous Opera, par contre, c'est niet.

Quand à IE, et malgré une feuille de style spécifique, le height: 100% ne fonctionne pas.

xpatval

[Monique]

Bonjour,

Comme IE ne connait pas le sélecteur > tu peux essayer quelque chose comme ceci

body>#left {
    mini-height: 50px;
}

 #left {
background-color: blue;
position: absolute;
left:0;
width: 150px;
height:50px; 
}

Toujours utile, ces liens vers des solutions à divers bugs : Contourner les défauts/limitations/bugs d'Internet Explorer

[xpatval]

J'ai contourné le problème de compatibilité IE d'une manière peut-être moins jolie, avec un

<!--[if IE]>

<link href="ie_feuille.css" rel="stylesheet" type="text/css">

<![endif]-->

Mais là, je reste dubitatif, car même Opera me provoque de l'urticaire.

Comme dit plus haut, mon souhait est d'avoir un height (ou un min-height) de 100% pour les div gauche et droit. Le problème est là.

xpatval