Milligram: Wie schiebe ich andere Elemente mit meiner Seitenleiste nach rechts?

Erstellt am 27. Okt. 2017 · 5Kommentare · Quelle: milligram/milligram

Ich möchte eine einfache Seitennavigation erstellen, die die gesamte Bildschirmhöhe einnimmt. ich benutze
Milligramm für meine Basis, und ich möchte, dass mein Side-Nav damit arbeitet. Ich habe folgende Einrichtung:

Codepen-Demo

Wie Sie sehen können, ist meine Seitenleiste das folgende Element

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

mit folgenden Stilen:

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

Das funktioniert, die Seitenleiste erscheint über allem, aber alles andere wird nicht zur Seite geschoben. Und wenn der Bildschirm klein ist, kollidiert der Inhalt mit der Seitenleiste.

Wie kann ich es so machen, dass die Seitenleiste alles andere (einschließlich der Navigationsleiste) um 250px (ihre Breite) nach rechts schiebt? Ich weiß, dass dies die Dinge auf kleineren Bildschirmen unbrauchbar macht, aber ich werde dem Benutzer die Möglichkeit geben, es umzuschalten.

Hacktoberfest help wanted

Quelle

fooksupachai

👍1

Alle 5 Kommentare

Dieses Problem habe ich auch gefunden. Hoffentlich hilft jemand bei diesem Problem.

abc985 am 14. Dez. 2017

Nicht gerade ein Problem mit dem Rahmen. Was Sie im Wesentlichen suchen, ist eine Off-Canvas-Sidebar. Ich habe Ihren Codepen modifiziert, damit er funktioniert: https://codepen.io/chillyorange/pen/EQYJvQ

Angewandte feste Positionierung auf der Seitenleiste und umhüllt den Inhalt in ein zusätzliches Element mit einem linken Rand, der der Breite der Seitenleiste entspricht.

chillyorange am 29. Jan. 2018

👍1

@chillyorange ‚s Antwort shoud Ihr Problem lösen.

Behobene Elemente scrollen nicht nach unten. So hat Ihre Seitenleiste 100 % Höhe, wie Sie möchten.

umitkucuk am 29. Jan. 2018

@fooksupachai Ich kann dir helfen!

Wenn Sie position: absolute definieren, überlappt dieses Element die anderen. Sie können versuchen, das Milligramm-Raster zu verwenden, um das erwartete Verhalten zu

Milligramm-Raster:

Die CSS-Eigenschaft position:

Lassen Sie es mich wissen, wenn Sie Fragen zur Verwendung des Milligramm-Rasters haben .

cjpatoilo am 7. Feb. 2018

👍1

@fooksupachai vorerst werde ich dieses Thema schließen.
Wenn Sie Hilfe benötigen, können Sie diese erneut öffnen oder eine neue Ausgabe eröffnen.

cjpatoilo am 19. Mai 2020

War diese Seite hilfreich?

0 / 5 - 0 Bewertungen

Milligram: Wie schiebe ich andere Elemente mit meiner Seitenleiste nach rechts?

Alle 5 Kommentare

Verwandte Themen