web-dev-qa-db-fra.com

Comment implémenter correctement la barre latérale fixe?

J'essaie d'accomplir cette conception: example design Où la barre latérale sera fixée, mais le côté droit (le contenu principal) défilera verticalement (et potentiellement horizontalement si la fenêtre du navigateur de l'utilisateur est plus petite). Quelle est la meilleure façon d'y parvenir?

J'ai essayé de faire en sorte que la barre latérale soit "fixe" avec une largeur fixe de 200 pixels, puis le contenu principal a juste une marge gauche de 200 pixels. Cependant, si le navigateur de l'utilisateur est alors plus petit que le contenu principal, la barre latérale chevauche tout le contenu lorsque l'utilisateur essaie de faire défiler horizontalement.

Existe-t-il un moyen plus intelligent d'y parvenir? Merci!

csssidebar
26
Jakemmarsh

Utilisez la div de contenu comme conteneur pour la page.

 .sidebar {
     position: fixed;
     width: 200px;
     height: 400px;
     background: #000;
 }
 .content {
     margin-left: 200px;
     height: 500px;
     width: auto;
     position: relative;
     background: #f00;
     overflow: auto;
     z-index: 1;
 }
 .info {
     width: 1440px;
     height: 300px;
     position: relative;
     background: #f55;
 }

<div class="sidebar"></div>
<div class="content">
    <div class="info"></div>
</div>

Votre contenu devra être le conteneur dans lequel mettre la page. Les valeurs ici sont mon test pour voir si j'ai raison. Si votre largeur et votre hauteur dépassent les valeurs que vous avez définies pour le contenu, les barres de défilement apparaissent.

Avoir un violon: http://jsfiddle.net/djwave28/JZ52u/

édition: barre latérale réactive

Pour avoir une barre latérale fixe réactive, ajoutez simplement une requête multimédia.

Exemple:

@media (min-width:600px) {
   .sidebar {
     width: 250px;
   }
   .content {
     margin-left: 250px;
   }
 }

Voici un autre violon: http://jsfiddle.net/djwave28/JZ52u/363/

33
Daniel

Voici une alternative: http://jsfiddle.net/BoyWonder/8mVQX/embedded/result/

body{
    padding-left:200px;
    margin:0;
}
div#sidebar{
   position:fixed;
   height:100%;
   width:200px; 
   top:0;
   left:0;
   background:grey; 
}
div#content{
    background:black;
    width:100%;
    height:1600px;
}
19
Evan Mosseri

Voici une autre alternative en utilisant seulement deux lignes CSS

.sidebar { position: sticky; top: 0; }

et le mérite revient à cela post .

Vous pouvez également expérimenter avec le code sur ici .

0
user11105413