Ajouter un Scroll sur un élément avec une hauteur variable

Eric237
Les bases HTML/CSS
Javascript

Mon but est d'ajouter la scroll bar au contenu de ma boîte de dialogue. Le soucis ici c'est la boîte de dialogue n'a pas une hauteur fixe. Mais par contre je sais que la hauteur totale c'est 95% de la toute la page.

.modal {
    height: 95%; /* Qui ne fonctionne pas */
    overflow-y: scroll
 }

S'il-vous-plaît comment est-ce que je dois m'y prendre ?

7 réponses

Arzou

Salut,
ta modale est à 95%, mais est ce qu'elle est positionnée par rapport à son container avec une taille définie ? Parce que sinon, elle sera à 95% de rien :)

Eric237
Auteur

le parent est en position fixe, top, letf, right, bottom 0

Arzou

Oui donc ton parent n'a pas de hauteur définie. Il faut que tu la définisse, sinon, ta modale fera 95% de .. rien ;)

EDIT: J'ai répondu un peu vite dsl. En effet, vu que tu as contrain ton parent à faire 100% du viewport, ta modale devrait faire 95% de hauteur.
Ton parent fait bien 100% du coup ?
Ta modale est bien directement l'enfant du container à 100% ?

Eric237
Auteur

oui effectivement mon container fais bien 100% du viewport, et le modal est l'enfant direct.

je me dit bien qu'avec le js je peux récupérer la taille réel de l'élément pour définir un height.

Un truc du genre:


container.style.height = container.offsetHeight

c à

Arzou

Non ça devrait marcher sans. Pas besoin de rajouter du JS pour ça.
Quand tu inspecte l'element dans ton navigateur, tu vois bien les styles applicqué ? Il n'y en a pas d'autre qui passent par dessus ?

Eric237
Auteur

Lorsque j'inspecte il y'a pas de code qui écrase le miens

Arzou

Est ce que tu pourrais mettre des imprim ecran, ou mettre ton bout de code sur codepen ou un truc du style pour qu'on puisse regarder ?