Avoir un div de position fixe qui doit faire défiler si le contenu déborde

J'ai en fait deux problèmes, mais résolvons d'abord le problème principal, car je pense que l'autre est plus facile à résoudre.

J'ai une position fixe div sur le côté gauche du défilement pour un menu. Le côté droit est un div standard qui défile correctement. Le problème est que lorsque le port d'affichage du navigateur est trop petit pour voir le menu entier .. il n'y a aucun moyen de le faire défiler que je puisse trouver (du moins pas avec css). J'ai essayé d'utiliser différents débordements en css, mais rien ne fait défiler le div. Le div qui contient le menu est réglé sur min-height: 100% et position: fixed .. les deux attributs que je dois conserver.

Le div contenant le menu est à l'intérieur d'un autre div wrapper qui est positionné de manière absolue et dont la hauteur est réglée à 100%.

Comment puis-je le faire défiler verticalement si le contenu est trop grand pour le div?

Cela m'amène à l'autre problème, à savoir que je ne veux pas qu'une barre de défilement s'affiche ... mais je pense que j'ai peut-être déjà une réponse à cela (mais cela ne fonctionne pas encore car je ne peux pas faire défiler le div pour commencer).

Des solutions? Peut-être que javascript est nécessaire? (dont je connais peu)

Exemple JS Fiddle

et le code pertinent à l'origine du problème (puisque publier le tout ici est trop long):

.fixed-content {
    min-height:100%;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
} 

J'ai également essayé d'ajouter de la hauteur: 100% également juste pour voir si c'était un problème, mais cela ne fonctionnait pas non plus ... ni une hauteur fixe, telle que 600px.

Le problème avec l'utilisation height:100%est que ce sera 100% de la page au lieu de 100% de la fenêtre (comme vous vous en doutez probablement). Cela causera le problème que vous voyez, car le contenu non fixe est suffisamment long pour inclure le contenu fixe avec une hauteur de 100% sans nécessiter de barre de défilement. Le navigateur ne sait pas / ne se soucie pas que vous ne pouvez pas réellement faire défiler cette barre pour la voir

Vous pouvez utiliser fixedpour accomplir ce que vous essayez de faire.

.fixed-content {
    top: 0;
    bottom:0;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
}

Cette fourchette de votre violon montre ma correction: http://jsfiddle.net/strider820/84AsW/1/

Voici les deux correctifs.

Tout d'abord, en ce qui concerne la barre latérale fixe, vous devez lui donner une hauteur pour qu'elle déborde:

Code HTML:

<div id="sidebar">Menu</div>
<div id="content">Text</div>

Code CSS:

body {font:76%/150% Arial, Helvetica, sans-serif; color:#666; width:100%; height:100%;}
#sidebar {position:fixed; top:0; left:0; width:20%; height:100%; background:#EEE; overflow:auto;}
#content {width:80%; padding-left:20%;}

@media screen and (max-height:200px){
    #sidebar {color:blue; font-size:50%;}
}

Exemple en direct: http://jsfiddle.net/RWxGX/3/

Il est impossible de ne PAS obtenir de barre de défilement si votre contenu dépasse la hauteur du div. C'est pourquoi j'ai ajouté une requête multimédia pour la hauteur de l'écran. Vous pouvez peut-être ajuster vos styles pour des tailles d'écran courtes afin que le défilement ne doive pas apparaître.

À bientôt, Ignacio

D'une manière générale, la section fixe doit être réglée avec width, heightet top, bottompropriétés, sinon il ne reconnaîtra pas sa taille et la position.

Si la boîte utilisée est un enfant direct pour le corps et a des voisins, il est logique de vérifier z-indexet de top, leftpropriétés, car elles pourraient se chevaucher, ce qui pourrait affecter le survol de votre souris lors du défilement du contenu.

Voici la solution pour une boîte de contenu (un enfant direct de bodytag) qui est couramment utilisée avec la navigation mobile.

.fixed-content {
    position: fixed;
    top: 0;
    bottom:0;

    width: 100vw; /* viewport width */
    height: 100vh; /* viewport height */
    overflow-y: scroll;
    overflow-x: hidden;
}

J'espère que cela aide n'importe qui. Je vous remercie!

Les solutions ici n'ont pas fonctionné pour moi car je stylise des composants de réaction.

Ce qui a fonctionné pour la barre latérale était

.sidebar{
position: sticky;
top: 0;
}

J'espère que cela aide quelqu'un.

Laisser une réponse pour quiconque cherche à faire quelque chose de similaire mais dans une direction horizontale , comme je le voulais.

Ajuster la réponse de @ strider820 comme ci-dessous fera la magie:

.fixed-content {        //comments showing what I replaced.
    left:0;             //top: 0;
    right:0;            //bottom:0;
    position:fixed;
    overflow-y:hidden;  //overflow-y:scroll;
    overflow-x:auto;    //overflow-x:hidden;
}

C'est tout. Vérifiez également ce commentaire où @train a expliqué l'utilisation de overflow:autoover overflow:scroll.