[CSS] Hauteur d'une div.

Qu'elle prenne la même hauteur que la div qui la contient

Sujet résolu

2 janvier 2006 à 17:38:17

Salut

Je cherche à faire un cadre pour une news par exemple, extensible. Je sais que ca se faisait avec des tableaux mais je sais aussi que c'est pô bien..

J'ai donc fait ca avec des div. (Je sais pas si ca change grand chose, mais bon.. je suis lancé.)

Voici mon code :

<div class="box">
<div class="titre">
<div class="gauche"> </div>
<div class="droite"> </div>
<div class="contenu">ld</div>
</div>

<div class="main">
<div class="gauche"> </div>
<div class="droite"> </div>
<div class="contenu">test beaucoup de fois</div>
</div>

<div class="bas">
<div class="gauche"> </div>
<div class="droite"> </div>
</div>

</div></div>

.global .box {
width: 75%;
margin: auto;
height: 500px;
}

.global .box .titre {
width: 100%;
background: url(img/box_haut.gif);
height: 44px;
}

.global .box .titre .gauche {
float: left;
width: 29px;
background: url(img/box_hg.gif);
height: 44px;
}

.global .box .titre .droite {
float: right;
width: 23px;
background: url(img/box_hd.gif);
height: 44px;
}

.global .box .main {
position: relative;
height: auto;
}

.global .box .main .gauche {
float: left;
width: 29px;
background: url(img/box_gauche.gif);
height: 100%;
}

.global .box .main .droite {
float: right;
width: 23px;
background: url(img/box_droite.gif);
height: 100%;
}

.global .box .main .contenu {
background-color: #313B49;
height: 100%;
}

.global .box .bas {
width: 100%;
background: url(img/box_bas.gif);
height: 17px;
clear: both;
}

.global .box .bas .gauche {
float: left;
width: 29px;
background: url(img/box_bg.gif);
height: 17px;
}

.global .box .bas .droite {
float: right;
width: 23px;
background: url(img/box_bd.gif);
height: 17px;
}

Et voici le rendu : http://orion.delain.free.fr/betasombre/

Question évidente : Comment faire pour que les div .gauche et .droite prenne la hauteur de .contenu ?

Merci d'avance..

Edit: Ah oui, j'ai bien esayé height: 100%; mais sans succès si je ne mettais pas height: x%; à .main, ce qui m'oblige à fixer une hauteur et n'est pas intéressant..

OR!ON

3 janvier 2006 à 19:51:58

P'tit UP ?

OR!ON

4 janvier 2006 à 19:00:57

Je vous refais le UP une dernière fois et je dis merci à Mystika pour son intervention par MP ;-)

OR!ON

6 janvier 2006 à 20:30:14

Question : j'ai le droit à combien de UPs comme ca, en pure monologue avant d'être qualifié de flooder ?

strucky

6 janvier 2006 à 20:51:10

Salut !

Pourquoi ne fais-tu pas tout simplement pour ta news un fond central sans tes div gauche et droite, c'est à dire un <div> contenant l'image du haut, un autre <div> pour celle du bas, et un autre pour le centre ?

OR!ON

6 janvier 2006 à 20:52:52

Salut

Merci de ta réponse

En fait, je ne fais pas de cette manière car la largeur de mon cadre n'est pas fixée d'avance.. Je ne peux donc pas mettre les coins et le background du haut sur une même image, et pareil pour le reste..

Merci

strucky

6 janvier 2006 à 21:09:47

Citation : OR!ON

Salut ;)En fait, je ne fais pas de cette manière car la largeur de mon cadre n'est pas fixée d'avance..

Je me doutais un peu de cette réponse

Alors je crois que pour ton bloc central, il faut :

- un <div> contenant tes trois éléments centraux en position relative.
- le <div> gauche et le <div> droite en position absolute avec height: 100%
- le div central sans positon particulière, avec margin left et right de la largeur des deux blocs.

J'avais déjà essayé un truc semblable, mais il me semble que ça bug avec Opera, par contre ça fonctionnait correctement avec IE et FF.

OR!ON

6 janvier 2006 à 21:46:58

C'est ce que j'avais essayé, cela ne semble pas fonctionné :S

Ni sous FF, ni sous Safari ni sous IE

Merci.

strucky

6 janvier 2006 à 21:56:11

Je vais regarder, je vais essayer de le refaire et je te dis si ça marche, enfin si plutôt si j'y arrive

OR!ON

6 janvier 2006 à 22:20:04

Merci beaucoup !!

Neoshin

7 janvier 2006 à 0:10:24

Je pense que tu auras ta réponse ici :

http://www.siteduzero.com/forum-83-3823-66749.html#r66749

Un cadre extensible et tout et tout...

J'ai essayé, ça fonctionne

gcyrillus

7 janvier 2006 à 1:44:19

bonjour,

en plaçant tes fond de bordures droites et gauches dans les elements deja presents et extensibles, ça marge(marche) tout seul:
essai de modifier ça (comme ça):

.global .global .box .main {
background: url(img/box_gauche.gif)repeat-y #313B49 top left ;
/* on place l'image a gauche repeter en hauteur */
}
.global .box .main .contenu {
background: url(img/box_droite.gif) repeat-y #313B49 top right ;
/* on place l'image a droite repeter en hauteur et une couleur de fond */
margin-left:17px;/* on laisse une marge exterieur a gauche pour laisser apparaitre la bordure et ne pas mettre de texte dessus */
padding-right:17px;/* on laisse une marge interieur a droite pour ne pas mettre de texte dessus */
}

et avant d'effacer tes balises pour tester le css modifier sans toucher au html
(la on "efface/cache" les balise avec le css).

.global .box .main .gauche {
display:none;
}
.global .box .main .droite {
display:none;
}

Si ça te convient, tu peut enlever tes 2 balise de droite et gauche et la portion css qui va avec.

Pas tester sous IE .

a plus

fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

strucky

7 janvier 2006 à 12:59:06

Citation : Neoshin

Je pense que tu auras ta réponse ici :

http://www.siteduzero.com/forum-83-3823-66749.html#r66749

Ah oui tiens, j'avais pas vu, qu'il y avait ça sur le forum, pas mal

Il y a le width: 100% à enlever car ça bug avec IE, mais c'est vrai que ça fonctionne impec

OR!ON

7 janvier 2006 à 12:59:47

Merci beaucoup tout le monde !

Gcyrillus, j'y avais pas pensé, mais c'est vrai que comme ca j'ai pas le probleme de la hauteur

Méthode adoptée :-)

A+ et merci