Overflow hidden ne fonctionne pas en vertical

Version imprimable

22/11/2016, 09h31
Etanne

1 pièce(s) jointe(s)

Overflow hidden ne fonctionne pas en vertical

Bonjour,

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

Voici une capture où je cherche à mettre une scrollbar verticale sur le cadre gris :
Pièce jointe 225492

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 !

Une solution possible:

Code:

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

22/11/2016, 10h28
nektarfl

... Et utiliser la balise max-height:100; pour limiter la hauteur de l'élément.
22/11/2016, 11h42
Etanne
Citation:
Envoyé par Ecared

Une solution possible:

Code:

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.

Citation:

Envoyé par nektarfl

... 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).

Bonjour,

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

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:

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:

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.

22/11/2016, 14h50
Etanne

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

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

J'ai trouvé la solution : les flexboxes

J'ai donc le css suivant :

Pour ma popup les propriétés suivantes :

Code:

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:

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:

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

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

:)