Fixe Div chevauche barre de défilement de la statique des div

J'ai de la difficulté à mon style de mise en page comme je le veux. J'ai une zone de contenu #content (le gris que vous pouvez voir dans l'image d'exemple) avec un jaune d'élément à l'intérieur. Cette div est position:static;height:100%;. Maintenant, j'ai un #left-panel div également, avec position:fixed;height:100%;. Le problème est que si la zone de contenu n'a pas assez d'espace à l'horizontale avec une barre de défilement s'affiche. Ce sera overlaped de la div. Pour moi, c'est tout logiquement, mais je ne sais pas comment contourner ce problème. Ma barre de défilement de la #content-élément doit être visible sur toute la largeur de la fenêtre. Il ne sera donc pas une solution pour moi, de réduire la largeur du contenu si le panneau est en vue.

L'ensemble de la css:

#content{
    width:100%;
    height:100%;
    background:grey;
}
#left-panel{
    position:fixed;
    top:0;
    left:0;
    width:300px;
    height:100%;
    overflow-y:auto;
}

Quelqu'un peut-il m'aider à résoudre ce pur CSS?

Fixe Div chevauche barre de défilement de la statique des div

Violon: http://jsfiddle.net/a2wn8x5z/1/

pouvez-vous donner un violon lien
voir mon post mis à jour
voir la mise à jour de la réponse, c'est peut-être ce que vous voulez
Désolé, non, ce n'est pas

OriginalL'auteur user3631654 | 2014-09-03

  1. 5

    Votre enveloppe de l'élément est position:fixed; je pense que vous parlez d'une superposition avec un panneau de navigation sur la gauche. Eh bien, j'ai eu une situation similaire et que vous ne pouvez pas utiliser position:fixed; si votre parent est aussi un élément position:fixed;. Ce chevauchement entre la barre de défilement de la mère wrapper (la superposition).

    Donc vous devez utiliser position:absolute; place ou à l'utilisation de ce plugin pour supprimer la largeur/hauteur de la barre de défilement de votre élément:

    Barre De Défilement De Fixateur

    +1 Merci, c'est une bonne solution

    OriginalL'auteur dude

  2. 0

    Tout d'abord, vous n'avez pas à ajouter de la "position: static;" style dans votre div, parce qu'il est statique par défaut. Il y a deux façons de résoudre votre problème:

    Ajouter "position: relative;" dans #contenu sélecteur et de déclarer #contenu #panneau de gauche dans votre code HTML.

    <div id="left-panel"></div>
<div id="content"></div>

#content{
    position: relative;
    width:100%;
    height:100%;
    background:grey;
}

    Codepen: http://codepen.io/anon/pen/yoHxl

    Ou ajouter "position: relative; z-index: 1" (z-index de #contenu devrait être plus élevé de #panneau de gauche) dans #contenu sélecteur.

    <div id="content"></div>
<div id="left-panel"></div>

#content{
    position: relative;
    width:100%;
    height:100%;
    background:grey;
    z-index: 1;
}

    Codepen: http://codepen.io/anon/pen/HgwDx

    Meilleur,
    Marek

    Désolé, mais ce n'est pas la solution, je suis à la recherche d'. Le panneau de gauche devrait rester au premier plan. Merci de regarder mon image par exemple. C'est exactement ce que j'essaie de réaliser, mais le panneau de gauche ne doit pas se superposer la barre de défilement du contenu!

    OriginalL'auteur Marek Streich

  3. 0

    peut-être que votre problème est dans le présent code ici

    <div style="width:110%;border-right:10px solid black;height:200px;background:yellow;"></div>

    supprimer la width:110%; et il doit être bon d'aller.

    Voici la Mis À Jour Le Violon

    Modifier

    Je pense que j'ai mal compris quel est le problème avant.

    Parce que dans votre cas, vous utilisez position: fixed; pour #wrapper et #left-panel, et les deux utilisent stlye left: 0, leur position se chevauchent les uns les autres à gauche de la fenêtre, vous avez besoin de la position de la left de #wrapper de ne pas être dans la même position que #left-panel, si vous avez besoin de l'ajouter à #wrapper

    left:200px; /* the width of #left-panel (if left panel has border, add it to this too )*/
right:0;

    et supprimer

    width:100%;

    voici la Mis À Jour Le Violon

    pour être sûr que c'est ce que vous voulez, essayez de changer le style de la div à l'intérieur de #content à width:200%; et ajouter margin:20px;

    Éditer Deux

    la cause de l' scrollbar à se chevauchent les uns les autres est parce que dans le violon vous utilisez position: fixed pour la #wrapper, donc pas de créer un scrollbar dans le body, puis vous ajoutez overflow:auto dans le #wrapper, causant la scrollbar à être créé pour le #wrapper et pas le body, si vous avez besoin de changer la CSS pour #wrapper à ce

    #wrapper{
    background:gray;
}

    Je ne comprend pas la hauteur parce que pour le div, le height est basée sur l'enfant intérieur, de sorte que vous ne pouvait pas voir le fond gris, à l'exception de vous ajouter quelques padding.

    voici la Travail De Violon

    Désolé, mais vous avez mal compris la question encore une fois 😛 c'est Ce que j'ai écrit "Si elle ne serait pas une solution pour moi, de réduire la largeur du contenu si le panneau est en vue". Mais c'est exactement ce que vous avez fait! La barre de défilement n'est pas sur la totalité de la fenêtre, au contraire, c'est seulement à l'intérieur de la zone de contenu. Cela ressemble comme je travaille avec des jeux de cadres et je n'aime pas ce look
    désolé, mon mauvais pour l'incompréhension pour la 2ème fois. Donc, ce que vous voulez est pour le #content à 100% de la largeur de la fenêtre d'affichage, et quand il y a une barre de défilement horizontale, la barre de défilement n'est pas recouverte par l' #left-panel, et il faut que CSS?
    Oui, c'est exactement ce que je suis à la recherche d'
    Je sais que je pourrais trouver la largeur de la barre de défilement avec JS et puis définissez la largeur du panneau de gauche, moins la largeur de la barre de défilement, mais je n'aime pas à corriger ma mise en page avec du JavaScript
    mise à jour de la réponse. Je pense que c'est le meilleur que vous pouvez faire si vous tenez absolument à utiliser uniquement CSS

    OriginalL'auteur Kyojimaru