Les navigateurs de la barre de défilement est sous mon fixe div

j'ai un en-tête fixe avec 100% de largeur.

#header {
background: #2e2e2e;
width: 100%;
z-index: 999;
position: fixed;
}

navigateurs barre de défilement est sous mon fixe div. Comment résoudre ce problème?

Les navigateurs de la barre de défilement est sous mon fixe div

  • pouvez-vous fournir le lien direct?
InformationsquelleAutor LifeIsShort | 2012-10-23
  1. 38

    son parce que la overflow-x: hidden; dans la base.css la ligne numéro 9 

    body {
    color: #444444;
    font: 13px/20px Arial,Helvetica,sans-serif;
    overflow-x: hidden; //remove this 
}
    • si j'ai mis en z-index: -1, que le problème est résolu. mais peut-être il ya une autre façon?
    • Merci beaucoup, ça a aidé! aussi a dû retirer overflow: auto; du corps. Je vous remercie pour votre temps!
    • Je ne comprends pas ce que la solution à ce problème a été? Semble l'OP qui a commencé ce fil n'a jamais dit que sa solution était. Je vois que le z-index:-1 fixe, cependant ce n'est pas une solution que je peux utiliser. Y avait-il un autre moyen pour régler ce problème?
    • Même problème, IMPOSSIBLE de supprimer le débordement ... solution? Nous devrions être en mesure de fixer la barre de défilement z-index à l'infini ou quelque chose
    InformationsquelleAutor NullPoiиteя
  2. 9

    Cela peut être résolu par l'ajout de dépassement de corps

    de

    overflow:auto;

    à

    overflow:auto;
overflow:initial;

    C'est votre problème

    Si votre barre de défilement est réglé sur le corps, si son structurée comme body > wrapper > header (avec position fixe), le contenu ainsi de suite

    ci-dessous est votre solution

    solution pour le problème

    remarque: cela fonctionne seulement sur le corps mais pas sur le div conteneur avec défilement. vous pouvez également travailler avec des z-index pour le faire fonctionner, mais vous serez en précisant z-index pour la pile des autres éléments afin d'obtenir la droite.

    Espère que cela aide..:)

    • Vous ne pouvez pas ajouter de même de la propriété avec une valeur différente, à deux reprises. Le premier sera remplacé par le second, et ça ne résout pas le problème pour moi.
    InformationsquelleAutor mike tracker
  3. 5

    Le problème n'est pas avec overflow-x sur la balise body. C'est à cause de overflow-x etoverflow-y sur le html tag. Une fois que j'ai enlevé ce à partir de la balise HTML, j'ai pu y mettre tout ce débordement que je voulais sur mon corps.

    Ce qui se passe quand:

    • overflow-x est soit auto, hidden, overflow, ou scroll
    • overflow-y est soit auto, hidden, -webkit-paged-x, ou -webkit-paged-y

    Il n'a pas à être un appel explicite à overflow-x ou overflow-y, comme overflow, les deux d'entre eux.

    Je suis sur Chrome 67 à l'aide de Windows 10.

    InformationsquelleAutor NonameSL
  4. 2

    Un css hack (j'en ai enfin trouvé un moyen), avec pas plus d'explication faite rapidement - la première flottait élément.
    Je pense que pour comprendre le principe de la façon dont il fonctionne à partir du code ci-dessous.

    Mise à jour: Et il y a un problème pour les navigateurs mobiles voir ci-dessous pour évaluer si oui ou non vous êtes d'accord avec elle. 

    <div style="position: fixed;top: 0;width: 100%;left: 0;z-index: 100000;height: 200px;background: #f00;">

<div id="aaaaa" style="display: block;float:right;color: #000;overflow-y:scroll;min-height:20px;top: -100px;background: #0f0;border: 1px solid #0f0;"></div>
<div id="bbbb" style="display: block;position:relative;color: #000;overflow:hidden;min-height:20px;background: #f0f;border: 1px solid #00f;">sdfasdf sdfas s as as fasd fasd fasdfasd fasd asdf asd fasdf sadf asdf asdf asdf sad fasdf asdf asdf asd fasdf asdf asdf asd fsad sad sfd

        <div style="width: 100%;height: 20px;background: #5ff"></div>

</div>

    Et le code final, près la même chose avec les choses que vous voulez voir visible et de travail 

    <div style="position: fixed;top: 0;width: 100%;left: 0;z-index: 100000;height: 0px;overflow:visible;background: #f00;">

<div id="aaaaa" style="display: block;float:right;color: #000;overflow-y:scroll;visibility:hidden;min-height:20px;top: -100px;background: #0f0;border: 1px solid #0f0;"></div>
<div id="bbbb" style="display: block;position:relative;color: #000;overflow:hidden;min-height:20px;background: #f0f;border: 1px solid #00f;">sdfasdf sdfas s as as fasd fasd fasdfasd fasd asdf asd fasdf sadf asdf asdf asdf sad fasdf asdf asdf asd fasdf asdf asdf asd fsad sad sfd

        <div style="width: 100%;height: 20px;background: #5ff"></div>

</div>

    Ce qui est important, il fonctionne avec les mobiles et les navigateurs de bureau. En fait pour le moment j'ai testé mobile sur windows bord lorsque mon ordinateur a changé en mode tablette et desktop un. Le code fonctionne, puis tout le temps.
    À vérifier est de savoir si ou non cela fonctionne avec :avant au lieu de div id="aaaa" pour le rendre plus css pur et supplémentaires divs intependent.

    Mise à jour: il ne fonctionne pas bien avec avant de de Bord du navigateur ne change pas la barre de défilement lors de la saisie du mode de la tablette.

    Si vous rencontrez des problèmes avec le contenu caché dans bbbb élément essayez de ne pas position: absolute/éléments fixes dans le bbbb conteneur.

    Je n'ai pas encore testé pour toutes les situations et tous les navigateurs.

    Mise à jour: le problème mentionné quelque part sur le haut de cette réponse - encore sur les navigateurs mobiles barre de défilement est couvert car la barre de défilement est dynamique, il apparaît que lorsque le défilement et vous savez qu'il n'est partie à aucun des conteneurs. La barre de défilement est probablement très mince sur tous les navigateurs, donc vous devez décider quoi faire avec elle. Peut-être un peu de marge de 5 pixels ou donc?

    InformationsquelleAutor OpenEX
  5. 1

    J'ai eu ce problème, ma barre de défilement qui était sous mes en-tête fixe et j'ai résolu ce problème après que j'ai retiré de ma balise html height: 100%; et j'ai ajouté d'autres propriétés pour être sûr que j'ai le même résultat. Aucune des autres solutions m'a aidé. J'espère que cela aide quelqu'un.

    • ce n'est pas de résoudre un problème similaire, je vais avoir.
    InformationsquelleAutor Madalina Taina
  6. 0

    Eu le même problème à réagir app.

    Déplacé overflow-y: scroll style de #root à body sélecteur. Il a résolu la question pour moi.

    InformationsquelleAutor Nikita
  7. 0

    Cela peut être résolu à l'aide de 2 façons comme ci-dessous:

    1.Première caculate la scrollbarWidth=el.offsetWidth - el.clientWidth

    2.Fixe div left=scrollbarWidth

    • Pouvez-vous expliquer que d'autres? Cela ne ressemble pas valide CSS pour moi
    InformationsquelleAutor Tony Benjamin