Ont une position fixe div qui doit de défilement si le contenu déborde

J'ai fait deux questions, mais permet de résoudre le principal problème que je crois que l'autre est plus facile à traiter.

J'ai une position fixe de la div sur le côté gauche de la de défilement d'un menu. Côté droit est une norme div qui défile correctement. Le problème est que lorsque l'affichage du navigateur-port est trop petit pour voir le menu complet.. il n'y a aucun moyen de l'obtenir pour faire défiler que je peux trouver (du moins pas avec les css). J'ai essayé en utilisant différents débordements dans le css, mais rien ne rend la div de défilement. La div qui contient le menu est réglé sur min-height:100% et position:fixe.. les deux attributs j'ai besoin de garder.

La div contenant le menu est à l'intérieur d'un autre wrapper div qui est en position absolue et à hauteur de 100%.

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

Qui m'amène à une autre question, que je ne veux pas d'une barre de défilement pour afficher.. mais je pense que j'ai peut-être déjà une réponse à cette (seulement il ne fonctionne pas encore, parce que je ne peux pas obtenir la div pour faire défiler pour commencer).

Toutes les solutions? Peut-être que javascript est nécessaire? (dont je sais peu de choses sur)

JS Fiddle Exemple

et le code qui est à l'origine du problème (puisque l'envoi de l'ensemble de la chose ici est waaay trop long):

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

Également essayé d'ajouter de la hauteur:100% ainsi juste pour voir si c'était un problème, mais il ne fonctionne pas non plus... ni n'a une hauteur fixe, comme 600px.

  • Merci de poster un jsfiddle avec le html et le css que vous utilisez actuellement pour qu'on puisse voir le problème. Merci!
  • avez-vous essayé overflow: auto; ?
  • Oui overflow:auto ou overflow-y:scroll ou overflow:scroll tous ne permettent pas de fixe div pour faire défiler.
  • La raison de défilement nécessaire, c'est si un div a TROP de contenu dans la définition de sa longueur. Si la vue navigateur de port réduit qui ne causerait pas de la div pour forcer une action de défilement de toute façon.
  • Ne pouvez pas poster un JSfiddle et html/css parce que c'est juste waaay trop longtemps et ils ne les laissez pas vous poster un JSfiddle lien sans le code. 🙁 J'ai posté juste le morceau de code qui ne semble pas être d'aider l'div défilement.. et le lien à l'ensemble de la chose.
InformationsquelleAutor TCD Factory | 2013-04-18
  1. 227

    Le problème avec l'aide de height:100% est qu'il sera de 100% de la page au lieu de 100% de la fenêtre (comme vous le feriez probablement attendre d'elle). Ce sera la cause du problème que vous voyez, parce que le non-fixe le contenu est assez longue pour inclure le contenu fixe à 100% de la hauteur sans nécessiter une barre de défilement. Le navigateur ne sait pas/que vous ne pouvez pas le fait que la barre de défilement vers le bas pour 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 mon fix:
    http://jsfiddle.net/strider820/84AsW/1/

    • Travaillé. J'avais besoin de cela pour une adaptation d'un Codrops article. Certains pourraient devoir utiliser de gauche et de droite définie à 0 également. Merci beaucoup, bonne chance
    • Si vous réglez "overflow-y" à l'auto, la barre de défilement, qui disparaissent lorsque le contenu est dans la fenêtre d'affichage. En d'autres termes, si elle ne déborde pas, il n'y aura pas de barre de défilement et quand il déborde, il y aura une barre de défilement.
    • Correct. J'étais juste à l'aide de son css et la fixation de ce qui a été vraiment brisé. Il semblait déjà avoir la réponse à cette peu dans sa question, cependant.
    • Je ne veux pas mine d'être 100% haute donc j'ai pris le top: 0. Est-ce tout de même à arrêter la "toile de fond" le contenu de défilement quand je suis en train de faire défiler le contenu fixe. Qui semble être le plus gros problème de convivialité que j'ai?
    • travaillé! excellente solution. Je ne comprends toujours pas le fond:0 partie.. u pourrait expliquer pls??
    • L'ajout de top:0 et en bas:0 tout en laissant de la hauteur dans une position fixe de l'élément provoque le navigateur pour étirer l'élément vers le haut de l'être à 0 et le bas, être à 0.

    InformationsquelleAutor strider820
  2. 4

    Voici deux correctifs.

    Tout d'abord, concernant la fixe à la barre latérale, vous avez besoin de lui donner une hauteur pour qu'il overflow:

    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%;}
}

    Live exemple:
    http://jsfiddle.net/RWxGX/3/

    Il est impossible de ne PAS obtenir une barre de défilement si le contenu dépasse la hauteur de la div. C'est pourquoi j'ai ajouté une media query pour la hauteur de l'écran. Peut-être que vous pouvez ajuster vos styles pour de courtes tailles d'écran de sorte que le défilement n'a pas besoin d'apparaître.

    Cheers,
    Ignacio

    • Voir le JSFiddle exemple que j'ai posté. Vous voyez le problème.
    • Cela ne fonctionne pas dans les navigateurs plus anciens, tels que le navigateur Safari Mobile pour iOS 4.2
    InformationsquelleAutor ignacioricci
  3. 1

    Généralement parlant, la partie fixe doit être définie avec width, height et top, bottom propriétés, sinon il refuse de reconnaître sa taille et sa position.

    Si la boîte est l'enfant direct pour le corps et a des voisins, alors il est logique de vérifier z-index et top, left propriétés, car ils pourraient se chevaucher les uns les autres, ce qui peut affecter votre souris survole pendant le défilement du contenu.

    Voici la solution pour une boîte de contenu (un enfant direct de body tag) 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;
}

    Espère que cela aide quelqu'un. Merci!!!!

    InformationsquelleAutor Lefan
  4. 0

    Laisser une réponse pour tous ceux qui cherchent à faire quelque chose de similaire, mais dans un horizontale direction, comme je le voulais.

    Peaufiner @strider820's réponse comme ci-dessous permettra de faire de 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;
}

    Que c'est. Vérifiez également ce commentaire où @train expliqué à l'aide de overflow:auto sur overflow:scroll.

    InformationsquelleAutor Siddhesh T