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


150

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.


Veuillez publier un jsfiddle avec le html et le css que vous utilisez actuellement afin que nous puissions voir le problème. Merci!
mchail

3
avez-vous essayé overflow: auto; ?
Dan

Oui overflow: auto ou overflow-y: scroll ou overflow: scroll all ne permet pas au div fixe de défiler.
TCD Factory

La raison pour laquelle le défilement est nécessaire est si un div a TROP de contenu dans ses longueurs définies. Si le port d'affichage du navigateur se rétrécit, cela ne forcerait pas le div à forcer de toute façon une action de défilement.
Dan

Impossible de publier un JSfiddle et html / css parce que c'est juste trop long et ils ne vous permettent pas de publier un lien JSfiddle sans le code. :( J'ai posté juste le morceau de code qui ne semble pas aider le défilement div .. et le lien vers le tout.
TCD Factory

Réponses:


245

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/


Travaillé. J'en avais besoin pour une adaptation d'un article Codrops. Certains devront peut-être utiliser la valeur 0 pour la gauche et la droite. Merci beaucoup, bonne chance
Santiago Baigorria

19
Si vous définissez "overflow-y" sur auto, la barre de défilement disparaîtra lorsque le contenu se trouvera dans la fenêtre. En d'autres termes, s'il ne déborde pas, il n'y aura pas de barre de défilement et quand il débordera, il y aura une barre de défilement.
train

Correct. J'utilisais juste son CSS et réparais ce qui était vraiment cassé. Il semblait cependant avoir déjà la réponse à ce point dans sa question.
strider820

3
travaillé! excellente solution. Je ne comprends toujours pas le fond: 0 partie .. pourriez-vous expliquer les pls ??
Gianluca Ghettini

5
L'ajout de haut: 0 et bas: 0 tout en laissant de côté la hauteur dans une position d'élément fixe oblige le navigateur à étirer l'élément pour que le haut soit à 0 et le bas à 0.
strider820

6

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


Voir l'exemple JSFiddle que j'ai publié. Vous verrez le problème.
TCD Factory

Cela ne fonctionne pas dans les navigateurs plus anciens, tels que Mobile Safari pour iOS 4.2
mheavers

4

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!


3

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.


J'édite du CSS depuis des années et je n'avais aucune idée de l'attribut «position collante». Merci pour cela, a parfaitement fonctionné pour ma mise en œuvre également!
1owk3y

0

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@train a expliqué l'utilisation de overflow:autoover overflow:scroll.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.