Discussion :

[Etanne]

Bonjour,

Je reste coincé sur un soucis de overflow:hidden.

Voici une capture où je cherche à mettre une scrollbar verticale sur le cadre gris :


J'ai essayé diverses combinaisons de propriétés CSS mais sans succès... ..mais j'ai du louper un détail.

Vous pouvez retrouver le jsfiddle ici : https://jsfiddle.net/zL8b9cmu/

Merci !

[Ecared]

Une solution possible:

Code :

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

1
2
3
4
5
6
 
#part_3 {
  background-color:gray;
  overflow-y:scroll;
  height:100px;
}

[nektarfl]

... Et utiliser la balise max-height:100; pour limiter la hauteur de l'élément.

[Etanne]

Une solution possible:

Code :

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

1
2
3
4
5
6
 
#part_3 {
  background-color:gray;
  overflow-y:scroll;
  height:100px;
}

Le problème c'est que la hauteur ne peut pas être fixe en px.

... Et utiliser la balise max-height:100; pour limiter la hauteur de l'élément.

Cela ne fonctionne pas

J'ai oublié de préciser que le div parente (#popup) ne doit pas avoir de propriété CSS height, mais seulement max-height:80% (j'ai mis 200px pour vous monter le overflow hidden qui ne fonctionnait pas).

[Invité]

Bonjour,

1/ comment veux-tu qu'une scrollbar apparaisse, si tu n'imposes pas une hauteur fixe ?

Code css :

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

1
2
3
4
5
#part_3 {
  background-color:gray;
  overflow:auto;
  height:100px;
}

2/ La 2ème solution, logique, est de mettre l'overflow sur la popup :

Code css :

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

1
2
3
4
5
6
7
#popup {
  overflow:auto;
.......
}
#part_3 {
  background-color:gray;
}

Sinon, explique la situation de façon plus claire et concrète, et montre un code testable "en situation".

3/ Quand tu mets une hauteur en % à un élément*, demande-toi toujours : "% de QUOI ?"

La réponse est : "de son parent".

OR, toi tu as mis height:100%;
Sauf qu'il y a déjà 2 autres éléments dans la popup.

Donc, comme dit Katia à Zezette : "Ca dépend, ça dépasse !"


* A savoir que TOUS les parents d'un élément DOIVENT avoir une hauteur clairement définie (en px ou %) pour que ça fonctionne.

D'où une 3ème solution possible :

Code css :

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
28
29
30
31
32
33
34
35
* { margin:0; padding:0; border:0; box-sizing:border-box; }
#popup {
  z-index: 10001;
    position: fixed;
    top: 194px;
    left: 50%;
    width: 600px;
    margin: -134px 0 0 -300px;
    background-color: #fafafa;
    padding: 0 20px;
    border:1px solid black;
 
    /* Pour provoquer le overflow */
    height:250px;
    xxoverflow:hidden;
}
 
#part_1 {
  background-color:yellow;
  height:18%;
  margin: 1% 0; 
}
 
#part_2 {
  background-color:green;
  height:38%;
  margin: 1% 0; 
}
 
#part_3 {
  background-color:gray;
  overflow:auto;
  height:35%;
  margin: 1% 0; 
}

N.B. box-sizing:border-box; permet de définir les hauteurs (ou largeurs), sans inclure les margin / padding / border.

[Etanne]

Merci pour toutes ces informations. Je vais revoir cela...

Ce que je cherche à faire est la chose suivante :
Les contenus en jaune et vert sont statiques (ils contiennent toujours les même éléments).
Le contenu en gris peut varier, il peut contenir quelques élements ou énormement.

Ce que je cherche à faire est que selon la taille du contenu en gris, la popup va s'agrandir jusqu'à un moment où celle-ci débordera en bas, dans ce cas une scrollbar s'affichera dans la div grise.
En aucun cas le contenu jaune ou vert changera de taille.

Merci

[Etanne]

J'ai trouvé la solution : les flexboxes

J'ai donc le css suivant :

Pour ma popup les propriétés suivantes :

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
 
#popup {
    z-index: 10001;
    position: fixed;
    top: 194px;
    left: 50%;
    width: 600px;
    margin: -134px 0 0 -300px;
    background-color: #fafafa;
    padding: 20px;
    border:1px solid black;
    display: flex;          /* flexbox */
    flex-flow: column;      /* flexbox */
    max-height:80%
}

Pour mes deux divs dont la taille ne varie pas :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
#part_1 {
    background-color:yellow;
    flex: 0 1 auto;      /* flexbox */
}
 
#part_2 {
    background-color:green;
    margin-bottom:10px;
    flex: 0 1 auto;      /* flexbox */
}

Et ma div où la taille varie et qui peut afficher une scrollbar :

Code :

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

1
2
3
4
5
6
 
#part_3 {
    background-color:gray;
    overflow:auto;
    flex: 1 1 auto;      /* flexbox */
}

jsfiddle : https://jsfiddle.net/Ly3ywxvy/1/