Discussion :

[tintin72]

Bonjour,

Voilà, j'aimerais que ma boite globale (main-box) adapte
sa hauteur en fonction du contenu des boites qu'elle
contient. Je n'ai donc pas renseigné la hauteur dans
la déclaration.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
.main-box{
  position: absolute;
  background-color: #FFEFD5;
  border: 1px solid black;
  top: 90px;
  left: 20px;
  width: 600px;
}
 
.child-box{
  position: absolute;
  top: 15px;
  left: 35px;
  width: 350px;
  height: 230px;
}
 
 
<div class="main-box">
 
<div class="child-box">
<h>blah blah ....</h>
<p>re blah blah ...</p>
</div>
 
</div>

Malheureusement la boite globale disparait, ça m'a l'air
d'être un pb de flux mais je n'arrive pas à voir lequel.

Quelqu'un pourrait m'aider ?

Merci

[pop_up]

ta boite globale disparait ?

tu pourrais mettre un exemple de ton code html et css où ça se produit ?

Sinon tu peux essayer de jouer avec l'overflow en spécifiant un overflow: auto sur ta mainbox

[Bisûnûrs]

C'est parce que tes boîtes enfants sont positionnées en absolu aussi. Elles sont donc hors flux ce qui fait que leur parent ne les prend pas en compte lorsqu'il s'agit de calculer sa hauteur.

[tintin72]

ta boite globale disparait ?

oui

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
Sinon tu peux essayer de jouer avec l'overflow en spécifiant un overflow: auto sur ta mainbox

J'ai essayé mais ça ne marche pas.

C'est parce que tes boîtes enfants sont positionnées en absolu aussi. Elles sont donc hors flux ce qui fait que leur parent ne les prend pas en compte lorsqu'il s'agit de calculer sa hauteur.

Effectivement lorsque j'enlève position: absolute; ça marche, mais je
ne peux plus déplacer la boite enfant, top et left sont sans effet.
Si je met position: relative: je peux de nouveau déplacer la boite enfant
mais la hauteur de la boite globale ne suit plus
Une idée ?

[Bisûnûrs]

Enlève la position et utilise la propriété margin[top|right|bottom|left].

[tintin72]

Super! ça marche
Merci