Comment faire en sorte que le contenu d'un élément fixe devienne défilant uniquement lorsqu'il dépasse la hauteur du viewport ?

Question

J'ai une div positionnée fixed sur le côté gauche d'une page web, contenant un menu et des liens de navigation. Aucune hauteur n'est définie par css, la hauteur est déterminée par le contenu, la largeur est fixe. Le problème est que si le contenu est trop important, la div sera plus grande que la hauteur de la fenêtre, et une partie du contenu ne sera pas visible. (Faire défiler la fenêtre ne fonctionne pas, car la position est fixed et la div ne fera pas défiler.)

J'ai essayé de définir overflow-y:auto; mais cela ne semble pas aider, la div ne semble pas remarquer qu'une partie d'elle est à l'extérieur de la fenêtre.

Comment puis-je rendre son contenu scrollable uniquement, si nécessaire, si la div dépasse de la fenêtre ?

Answer 1

Pour votre usage, vous pouvez simplement utiliser

position: absolute;
top: 0%;

et cela reste redimensionnable, défilable et réactif.

Answer 2

Je présente ceci comme une astuce plutôt qu'une solution. Cela peut ne pas fonctionner tout le temps. Je l'ai fait de cette façon car je crée une page HTML très basique, pour un usage interne, dans un environnement très bizarre. Je sais qu'il existe des bibliothèques comme MaterializeCSS qui peuvent créer de très belles barres de navigation. (J'allais les utiliser, mais cela n'a pas fonctionné avec mon environnement.)

Answer 3

Ajoutez ceci à votre code pour une hauteur fixe et ajoutez un défilement.

.fixedbox {
    max-height: auto;
    overflow-y: scroll;
}