Position fixe et overflow-y:scroll problème

J'ai lu cette question & réponse: CSS overflow-x: visibles; overflow-y: hidden; causant la barre de défilement problème ainsi qu'un tas d'autres contradictoires des cas d'utilisation. J'ai essayé l'application de différents dépassement de types différent des parents. Rien ne semble pour obtenir mon cas d'utilisation de travail.

Mon Cas

J'ai une pleine hauteur fixe menu qui contiendra beaucoup de liens donc si un navigateur n'est pas assez élevé pour leur montrer tout ce que je voudrais permettre à l'utilisateur de faire défiler l'fixe div. Pas une demande audacieuse.

Comment puis-je contourner ce problème, voici un exemple de la configuration que je suis en utilisant: http://jsfiddle.net/mz9abf43/9/

Mise à JOUR

C'est la mise à jour de jouer avec mon code complet pour le contexte, c'est exactement comment je veux que mon menu à regarder, mais je veux juste permettre le défilement vertical si la hauteur de l'écran est plus petit que la longueur du menu. http://jsfiddle.net/mz9abf43/24/

Sortie Attendue

Les lignes entre chaque lien doit débordement à droite du menu bleu (comme l'image ci-dessous) ET également permettre à l'utilisateur de faire défiler dans le menu bleu. Actuellement je ne peut faire l'un ou l'autre.

Position fixe et overflow-y:scroll problème

Ma structure est:

<div id="fixed">
    <nav>
       <ul class="menu">
         <div class="drop">
             <li>Link here</li>
             <li>Link here
                 <ul>
                    <div class="drop">
                        <li>Link here</li>
                        <li>Link here</li>
                    </div>
                 </ul>
             </li>
             <li>Link here</li>
         </div>
       </ul>
    <nav>
</div>

Mon CSS est

#fixed {
        width:280px;
        position: fixed;
        top: 0;
        left: 0;
        bottom:0;
        z-index: 1000;
        background: #fff;
}

.menu   {
        padding: 0;
        margin: 0;
        position: fixed;
        z-index: 9998;
        top:0;
        bottom:0;
        left:0;
        background: white;
        width: 280px;

        /* THIS IS NOT WORKING - HOW CAN I GET THIS WORKING? */
        overflow-y: scroll;
        overflow-x: visible;

}

.menu .drop {
            background: #fff;
            height: 100%;
            z-index: 0;
}
  • quel est le résultat attendu?
  • Les lignes entre chaque lien doit débordement à droite du menu bleu, tout en permettant à l'utilisateur de faire défiler le menu bleu. Actuellement je ne peut faire l'un ou l'autre. Voir mise à jour de question.
  • Vous ne pouvez pas être au courant, mais dans Safari 9 (dernière version d'os x) lorsque vous faites défiler à tous dans votre jsfiddle, tout scintille en noir et blanc! Vous aimeriez peut-être qu'ainsi.
  • Est-ce ok si on change la structure de votre code HTML?
  • Ses un WP généré liste UL & je n'ai que le contrôle d'emballage dans le sous-menu UL (.déposer les divs). Si vous pouvez coller à qui puis par tous les moyens de changer ce que vous devez faire pour obtenir cela a fonctionné. Le scintillement sur parchemin, j'ai juste besoin d'appliquer un BG blanc à la .menu li & qui va le corriger.
  • Je ne pense pas que Vous pourriez réaliser que sans javascript. Qui briserait spécification HTML.
  • Je suis heureux d'utiliser le JS si cela signifie que le problème est résolu. Avez-vous une solution à l'esprit?
  • ouais, je vais faire une démo plus tard aujourd'hui.
  • "défiler dans les div. Pas une demande audacieuse.". Désolé, mais oui, c'est une demande audacieuse. Position:fixe ne peuvent pas être affichés que lorsque vous définissez avec top:0 Vous êtes le positionnement de l'élément à être toujours en haut de la fenêtre (et pas le contenant), et j'ai peur c'est exactement ce que vous allez voir, votre ul toujours en haut de la fenêtre. Pourquoi n'utilisez-vous pas de position absolue si vous avez besoin de ce livre?
  • Je ne peux pas utiliser le positionnement absolu comme il doit être fixé sur l'écran à tout moment.
  • vous pouvez faire un absolu placé élément à être fixée sur l'écran à tout moment si rrelative à la body(à moins de défilement... qui est ce que vous avez besoin). Mais jusqu'à vous. gl avec votre projet
  • Eh bien, je serais ouvert à votre solution tant qu'il a été fixé sur l'écran, même lorsque vous faites défiler.
  • Eh bien, comme un rapide, il suffit de changer l'approche fixe pour absolue et de supprimer le "bottom:0". c'est un point de départ. à partir de là, il suffit de cocher ce qu'il vous faut / miss/ etc: jsfiddle.net/alvaromenendez/mz9abf43/28
  • OK, donc comment pourrais-je faire la div de hauteur totale, si le contenu de la page est plus longue que le menu, voir: jsfiddle.net/mz9abf43/30
  • Facile avec un très simple jquery. J'ai emballé tous vos <p>dans un div "content", calculer à la charge à la hauteur de ce récipient et ajouter de la hauteur à votre menú: jsfiddle.net/alvaromenendez/mz9abf43/32 Si Vous voulez je peut "passer"! ces observations à une réponse afin que je puisse le modifier ici et là, tant que je peux vous aider.
  • Combiné avec des media queries ce qui a fait le tour. Si vous voulez le mettre dans une réponse que je vais accepter.
  • Fait. J'ai fait une réponse avec mon commnents.

InformationsquelleAutor egr103 | 2015-10-01
  1. 0

    Position:fixe ne peuvent pas être affichés. Lorsque vous définissez avec top:0 Vous êtes le positionnement de l'élément à être toujours en haut de la fenêtre (et pas le contenant), et j'ai peur c'est exactement ce que vous allez voir, votre ul toujours en haut de la fenêtre.

    Probablement mieux d'utiliser un absolu positionné si votre menú peut obtenir de nombreux éléments de sorte que vous obtiendrez de la barre de défilement sur le corps.

    donc comme un point de départ, Vous avez juste besoin de chnage fixe pour absolue et supprimer les bottom:0propriété:

    .menu   {
        padding: 0;
        margin: 0;
        position: absolute;
        z-index: 9998;
        top:0;
        left:0;
        background: white;
        width: 280px;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;                
    }

    que dans ce VIOLON

    Vous maintenant juste besoin d'être sûr de la hauteur de ce menu est aussi "grand" que votre contenu de sorte qu'il comblera toutes vos hauteur de la fenêtre. Vous pouvez utiliser une base de jquery:

    var menuHeight = $('.content').outerHeight(true );
$('.menu').css({
    'height': menuHeight + 'px'
});

    où vous calculer la hauteur de votre "contenu" récipient et ajoutez-la à une propriété css à votre menu:

    JSFIDDLE2

    Note: j'ai fait cette réponse de mes commentaires sur la question. Si vous trouvez un autre problème, n'hésitez pas à commenter ici et je vais essayer de mon mieux pour aider (si je sais comment).

    • Combiné avec CSS min-height requêtes de média, j'ai réussi à obtenir ce que je voulais. Donc j'ai appliqué de la position absolue .menu pour la hauteur de l'écran inférieur à 800px et pour des écrans plus grands que cela, j'ai appliqué position:fixed.
    InformationsquelleAutor Alvaro Menéndez
  2. 1

    Vous devez utiliser box-sizing:border-box dans .menu li a et faire width: 70%; dans .menu .drop.

    .menu li a {
    color: #aaa;
    text-transform: uppercase;
    font-size:12px;
    padding: 8px 35px;
    display: inline-block;
    width: 100%;
    border-bottom: 2px solid #f0f0f0;
    box-sizing:border-box;
}

    Mise à JOUR de Violon

    • Pardonnez-moi si j'ai mal compris cela, mais cela ne veut pas obtenir les résultats attendus, comme illustré dans ma question?
    • Ohh non je suis désolé @egr103 fait je n'étais pas correctement, veuillez vérifier la mise à jour de violon, j'espère que ça vous aide.
    • Alors, quelles sont les modifications de code que vous avez fait pour obtenir que jsFiddle de travail? Pourriez-vous mettre à jour la réponse?
    • J'ai peur que cela n'a pas fonctionné. Je n'arrive pas à comprendre comment la largeur de 70% devrait afficher les menus vers la droite?
    InformationsquelleAutor Mukul Kant
  3. 0

    Si j'ai mal compris, Merci de coorect moi.

    Essayez d'ajouter css Suivant 

    .menu li a {
color: #aaa;
text-transform: uppercase;
font-size: 12px;
padding: 8px 35px;
display: inline-block;
width: 100%;
border-bottom: 2px solid #f0f0f0;
position: relative;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

    }

    Aussi, Vous devez supprimer hauteur:100% des .menu .baisse de classe pour montrer fond bleu.

    Il est peut-être l'aide

    • Malheureusement non, cela n'a pas fonctionné, veuillez consulter la section intitulée "résultats Attendus" dans ma question. Malheureusement, comme les autres, de répondre par @Maddy cette coupe de la flèche vers la droite. Voir mise à jour de question
    InformationsquelleAutor user1903471
  4. -2

    Essayer de mettre overflow-x , overflow-y cachés

    cela devrait-il Travailler

    • Veuillez fournir des précisions sur les raisons de cette solution résout le problème, de sorte qu'il sera utile pour les futurs lecteurs. Merci!
    InformationsquelleAutor Piotr Sikora