Bonjour,

Je travaille sur un petit projet personnel actuellement et j'aimerais activer la propriété scroll à un élément qui contient d'autres éléments ayant une taille fixée. Le but étant que le bloc conteneur prenne toute la hauteur qu'il peut sans dépasser de la taille de l'écran et que si cela dépasse, il y ai un overflow: scroll.

Une solution était de fixer la taille du conteur de manière fixe en rajoutant :

.container_scroll {
  height: 250px;
}

Mais ce n'est pas le résultat que je souhaite. J'aimerais que ce conteneur prenne toute la hauteur possible sans dépasser de la taille de la fenêtre.

Voici un lien codepen pour mieux comprendre : https://codepen.io/MaxBresil/pen/RwwvpOw

J'ai déjà testé pas mal de chose en jouant avec des hauteurs en pourcentages, des overflow:hidden, ... mais rien n'y fait :x

Merci de m'avoir lu.

Bonsoir,

J'ai pas très bien compris peux-tu éclaircir plus ? Si ce que tu veux c'est ne pas afficher le scroll, tu dois enlever le overflow:scroll; sur ton css.

-
Edité par Mehddii 20 novembre 2019 à 0:09:23

Je ne vois pas ce qui te pose problème Je viens de tester sur ton codepen en plaçant une height en vh et ça fonctionne.

Pour ce qui est du "%", n'oublies pas que c'est relatif à l’élément parent. Il faut donc que la taille du parent direct soit connue. Hors dans ton exemple, <section> est le parent et tu n'as pas défini de height sur cet élément.

Edit: Il est tard et j'avais peu de motivation de base mais finalement j'ai repris un peu ton code: https://codepen.io/slassis/pen/QWWYVXp

Par contre j'ai pas du tout calculé correctement les tailles de marges etc dans ma fonction calc Ne m'en tient pas rigueur, je te laisse le soin de le faire toi même. Au final la solution est assez compréhensible.

-
Edité par slassis 20 novembre 2019 à 0:27:01

slassis a écrit:

Je ne vois pas ce qui te pose problème Je viens de tester sur ton codepen en plaçant une height en vh et ça fonctionne.

Pour ce qui est du "%", n'oublies pas que c'est relatif à l’élément parent. Il faut donc que la taille du parent direct soit connue. Hors dans ton exemple, <section> est le parent et tu n'as pas défini de height sur cet élément.

Edit: Il est tard et j'avais peu de motivation de base mais finalement j'ai repris un peu ton code: https://codepen.io/slassis/pen/QWWYVXp

Par contre j'ai pas du tout calculé correctement les tailles de marges etc dans ma fonction calc Ne m'en tient pas rigueur, je te laisse le soin de le faire toi même. Au final la solution est assez compréhensible.

-
Edité par slassis il y a environ 10 heures

Hey ! Ca m'a l'air super ! Un grand merci. Je ne connais pas la fonction calc du tout donc je vais aller me renseigner. Je reviens vers toi si je ne comprends pas tout