Milligram: Comment pousser d'autres éléments vers la droite à l'aide de ma barre latérale ?

Créé le 27 oct. 2017 · 5Commentaires · Source: milligram/milligram

Je veux créer une navigation latérale simple qui occupe toute la hauteur de l'écran. j'utilise
Milligramme pour ma base, et je veux que ma navigation latérale fonctionne avec. J'ai la configuration suivante :

Démo Codepen

Comme vous pouvez le voir, ma barre latérale est l'élément suivant

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

avec les styles suivants :

div.sidebar { 
      position: absolute; width: 250px; 
      height: 100%;
      z-index: 99; 
      background-color: black;
 }

Ce genre de travail fonctionne, la barre latérale apparaît avant tout, mais tout le reste n'est pas mis de côté. Et si l'écran est petit, le contenu détonne avec la barre latérale.

Comment puis-je faire en sorte que la barre latérale pousse tout le reste (y compris la barre de navigation) vers la droite de 250px (sa largeur) ? Je sais que cela rendra les choses inutilisables sur des écrans plus petits, mais je donnerai à l'utilisateur un moyen de le basculer.

Hacktoberfest help wanted

Source

fooksupachai

👍1

Tous les 5 commentaires

J'ai aussi trouvé ce problème. Espérons que quelqu'un aidera avec ce problème.

abc985 le 14 déc. 2017

Pas vraiment un problème avec le cadre. Ce que vous recherchez essentiellement, c'est une barre latérale hors canevas. J'ai modifié votre Codepen pour le faire fonctionner : https://codepen.io/chillyorange/pen/EQYJvQ

Appliqué un positionnement fixe sur la barre latérale et enveloppé le contenu dans un élément supplémentaire avec une marge gauche correspondant à la largeur de la barre latérale.

chillyorange le 29 janv. 2018

👍1

La réponse de @chillyorange devrait résoudre votre problème.

Les éléments fixes ne défilent pas vers le bas. Ainsi, votre barre latérale aura 100% de hauteur comme vous le souhaitez.

umitkucuk le 29 janv. 2018

@fooksupachai je peux t'aider !

Si vous définissez position: absolute cet élément chevauchera les autres. Vous pouvez essayer d'utiliser la grille milligramme pour avoir le comportement attendu.

Grille en milligrammes :

La propriété CSS de la position :

Faites-moi savoir si vous avez des questions sur l'utilisation de la grille milligramme .