web-dev-qa-db-fra.com

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

J'ai en fait deux problèmes, mais je vais d'abord résoudre 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 une div standard qui défile correctement. Le problème est que lorsque le port de visualisation du navigateur est trop petit pour afficher tout le menu, il n’existe 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 rend le défilement div. La div qui contient le menu est définie sur min-height: 100% et position: fixed .. les deux attributs que je dois conserver.

La div contenant le menu se trouve dans une autre div d'emballage qui est positionnée de manière absolue et dont la hauteur est définie à 100%.

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

Cela m’amène à l’autre problème, à savoir que je ne souhaite pas afficher de barre de défilement .. mais je pense que j’ai déjà une réponse à cette question (seulement cela ne fonctionne pas encore car je ne parviens pas à faire défiler la div pour commencer).

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

JS Fiddle Exemple

et le code pertinent qui cause le problème (car tout afficher ici est trop long):

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

Nous avons également essayé d’ajouter de la hauteur: 100% également pour voir si c’était un problème, mais cela ne fonctionnait pas non plus… ni une hauteur fixe, telle que 600 pixels.

javascriptcssscrolloverflowcss-position
130
TCD Factory

Le problème avec height:100% est que 100% de la page seront remplacés au lieu de 100% de la fenêtre (comme on pourrait s'y attendre). Cela entraînera le problème que vous voyez, car le contenu non fixé est suffisamment long pour inclure le contenu fixe avec une hauteur de 100% sans nécessiter de barre de défilement. Le navigateur ignore que vous ne pouvez pas réellement faire défiler la barre pour la voir.

Vous pouvez utiliser fixed pour accomplir ce que vous essayez de faire.

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

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

217
strider820

Voici les deux correctifs.

Tout d’abord, en ce qui concerne la barre latérale fixe, vous devez lui donner une hauteur suffisante 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 une barre de défilement si votre contenu déborde de la hauteur de la div. C'est pourquoi j'ai ajouté une requête multimédia pour la hauteur de l'écran. Peut-être pouvez-vous ajuster vos styles pour des tailles d'écran courtes afin que le défilement n'ait pas besoin d'apparaître.

À la vôtre, Ignacio

4
ignacioricci

De manière générale, la section fixe doit être définie avec les propriétés width, height et top, bottom, sinon elle ne reconnaîtra pas sa taille et sa position.

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

Voici la solution pour une zone de contenu (un enfant direct de la balise body) 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 ça aide n'importe qui. Je vous remercie!

0
Lefan

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

Tweaking @ strider82 la réponse 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 ça. Vérifiez également ceci commentaire où @ train a expliqué en utilisant overflow:auto sur overflow:scroll.

0
Siddhesh T