web-dev-qa-db-fra.com

Flex Layout avec barre latérale à position fixe (sans défilement)

J'ai une mise en page avec des barres latérales gauche et droite, entourant la zone de contenu principal au milieu.

Les barres latérales et le contenu principal sont des éléments flexibles placés dans une disposition flexible de gauche à droite.

Les barres latérales contiennent des menus et des méta-liens.

Ma question est la suivante: lors du défilement de la zone de contenu, est-il possible de laisser les barres latérales en position fixe, de manière à ce qu'elles restent en position de tête et ne descendent pas?

JS Fiddle: http://jsfiddle.net/Windwalker/gfozfpa6/2/

HTML:

<div class="flexcontainer">
    <div class="flexitem" id="canvas-left">
        <p>This content should not scroll</p>
    </div>
    <div class="flexitem" id="content">
        <div>
            <p>Scrolling Content</p>
        </div>
    </div>
    <div class="flexitem" id="canvas-right">
        <p>This content should not scroll</p>
    </div>
</div>

CSS:

.flexcontainer {
    display: flex;
    flex-direction: row;
    min-height: 100%;
    align-items: stretch;
}
.flexitem {
    display: flex;
}
#canvas-left {
    background: yellow;
    order: -1;
    flex: 0 0 57px;
}
#content {
    background: green;
    order: 1;
    padding: 1rem;
}
#content div {
    display: block;
}
#canvas-right{
    background: blue;
    order: 2;
    flex: 0 0 57px;
}
htmlcssflexbox
9
Windwalker

Consultez la question similaire avec la solution fournie: Comment simuler un comportement «position: fixed» sur la barre latérale alignée sur Flexbox .

Selon votre code, vous pouvez également envelopper votre contenu intérieur dans un wrapper "position: fixed":

<div class="flexitem" id="canvas-left">
    <div class="fixed">
        <p>This content should not scroll</p>
    </div>
</div>

Et ajoutez le style approprié en CSS:

.fixed {
    position: fixed;
    width: 57px; /* according to #canvas-left */
}

Voici un exemple de votre code avec la barre latérale gauche fixe: http://jsfiddle.net/8hm3849m/ . Notez que cette astuce ne vous fournira pas la grille flexible appropriée pour les barres latérales, la largeur du wrapper devrait être fixée (ou définie dynamiquement via JavaScript).

11
user3576508

La question est ancienne, mais j’ai résolu un problème similaire en utilisant

position: sticky;
top: 0;

pour les éléments gauche et droit . Aussi j'ai enlevé le 

display: flex

cSS pour les éléments flex, je ne pense pas que ce soit nécessaire.

https://jsfiddle.net/8mpxev0u/

0
Istopopoki

je ne sais pas comment faire avec flex, mais voici un fichier CSS plus simple/alternatif qui supprime tout ce qui se plie ... et n'essayez jamais d'ajouter du rembourrage à une div externe à beaucoup de divs

.flexcontainer {
    display: block;
    min-height: 100%;
    align-items: stretch;
}
.flexitem {
    display: flex;
}
#canvas-left {
    background: yellow;
    order: -1;
    left: 0px;
    width: 20%;
    position: fixed;
}
#content {
    position: absolute;
    background: green;
    order: 1;
    width: 60%;
    left: 20%;
}
#content p {
    display: block;
    padding: 1rem;
}
#canvas-right{
    background: blue;
    order: 2;
    right: 0px;
    width: 20%;
    position: fixed;
}
0
jak89 _1