Discussion :

[MkcookieFIFO]

Bonjour,

J'ai un groupe de div :

Code html :

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

1
2
3
4
<div id="group">
<div id="left"></div>
<div id="right"></div>
</div>

Voila le contexte:
Je n'ai pas mis de valeur dans le style de ma div "group" pour qu'elle s'adapte à mes div left et right (qui sont cote à cote),
Les deux div ont pour height: 100%.

Mon problème:

Ma div "group" n'ayant pas de valeur de référence forcement ça ne marche pas.
Puis-je gérer la taille de mes div de manière à ce que mes div "left" et "right" aient toujours la même taille se basant sur le plus grand (contenu variable sur les 2 div) ?

Merci de m'éclairer.

[tdutrion]

Bonjour,

Regarde du côté des flexbox.

[NoSmoking]

Bonjour,
il on peut également utiliser les display:table-xxx,
avec

Code html :

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

1
2
3
4
5
6
7
8
<div id="group">
  <div id="left">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel lobortis arcu. Duis porta aliquam odio ut iaculis. Proin sodales nibh non malesuada fermentum.</p>
  </div>
  <div id="right">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

en appliquant le CSS suivant

Code css :

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

1
2
3
4
5
6
7
8
#group{
  display:table;
}
#group > div {
  display:table-cell;
  width:20em;
  border:1px solid #abc;
}

[MkcookieFIFO]

Désolé j'étais absent un moment, mais je me suis attardé sur les flexbox.

Code :

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

1
2
3
4
 
#group{
   display:flex;
}

Voila qui m'a permis de régler mon problème car par défaut pas mal de paramètre correspond à la résolution de ce genre de problème.

Du coup pour les intéressés, voila mon second problème que je comptais exposer, mais du coup la voici avec son intitulé et sa solution:

Code :

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

1
2
3
4
5
6
7
8
 
<div id="group">
   <div id="left"></div>
   <div id="right">
      <div id="fixe"></div>
      <div id="variable"></div>
   </div>
</div>

Problème: dans ma div "right" j'ai une div "fixe" qui comme son id le suggère reste d'une taille pré-définit, et j'aimerai que mon div "variable" prenne toute la place restante.

Résolution:

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
 
#group{
   display:flex;
}
 
   #right{
      width: 150px;
      flex-direction: column; 
      display:flex;
   }
 
      #fixe{
         width: 150px;
         height : 50px;
      }
 
      #variable{
         width: 150px;
         flex: 1 1 auto;
      }

Je vais tenter d'expliquer, si je ne dis pas de bêtise :

#right : display: flex; Permet de rendre flexible les div enfants. | flex-direction: column; Important: donne le sens de réaction des div enfants par rapport au conteneur, sans cette ligne #variable écrase #fixe
#variable : flex: 1 1 auto; Donne les propriétés de la flexbox par défaut : 0 1 auto - flex-grow, flex-shrink, flex-basis : ici on change la valeur de flex-grow (donc le premier 1) afin que la div puisse s'étendre

Voila merci à vous et parcontre les tables m'ajoute un tbody, le problème et que c'est un site déjà avancé donc ça me laisse des erreurs, la flexbox me convient mieux sur le coup. Merci tout de même.

[NoSmoking]

Voila merci à vous et parcontre les tables m'ajoute un tbody,...

je ne parlais pas de balise <table> mais de CSS, display:table.
Le principal reste que cela fonctionne pour toi !