Vous avez un div à position fixe qui doit défiler si le contenu déborde.

Question

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

J'ai un div à position fixe 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 la fenêtre du navigateur est trop petite pour voir l'ensemble du menu, 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 la division. La div qui contient le menu est définie sur min-height:100% et position:fixed 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 fixée à 100 %.

Comment faire en sorte qu'il défile verticalement si le contenu est trop grand pour le div ?

Cela m'amène à l'autre problème, à savoir que je ne veux pas que la barre de défilement s'affiche mais je pense que j'ai déjà une réponse à cela (seulement, cela ne fonctionne pas encore parce que je n'arrive pas à faire défiler la div pour commencer).

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

Exemple de violon JS

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

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

J'ai également essayé d'ajouter height:100% pour voir si c'était un problème, mais cela n'a pas fonctionné non plus... pas plus qu'une hauteur fixe, comme 600px.

Answer 1

Le problème de l'utilisation de height:100% est qu'elle occupera 100 % de la page au lieu de 100 % de la fenêtre (comme vous vous y attendiez probablement). Cela entraînera le problème que vous rencontrez, 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 ou ne se soucie pas du fait que vous ne pouvez pas faire défiler la barre vers le bas pour le 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 fourchette de votre violon montre ma solution : http://jsfiddle.net/strider820/84AsW/1/

Answer 2

Les solutions proposées ici n'ont pas fonctionné pour moi car je stylise des composants react.

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

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

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

Answer 3

En règle générale, la section fixe doit être fixée avec width , height y top , bottom sinon il ne reconnaîtra pas sa taille et sa position.

Si la boîte utilisée est l'enfant direct du corps et qu'elle a des voisins, il est logique de contrôler z-index y top, left 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 la boîte de contenu). body ) qui est couramment utilisé 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 aidera tout le monde. Merci.

Answer 4

Voici les deux corrections.

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 concret : http://jsfiddle.net/RWxGX/3/

Il est impossible de ne pas obtenir une barre de défilement si votre contenu dépasse la hauteur de la division. C'est pourquoi j'ai ajouté une requête média pour la hauteur d'écran. Vous pouvez peut-être ajuster vos styles pour les écrans de petite taille afin d'éviter l'apparition de la barre de défilement.

A la vôtre, Ignacio

Answer 5

Je laisse une réponse à tous ceux qui cherchent à faire quelque chose de similaire mais dans une horizontal la direction, comme je le voulais.

Ajustement de @strider820 La réponse de l'auteur 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. Regardez aussi ceci commentaire donde @train expliqué en utilisant overflow:auto sur overflow:scroll .