[ERLEDIGT] Responsive-Off-Canvas-Menü CSS ändern

[Ehemaliger Benutzer 33785]

Hallo,
ich habe im Internet ein Github Projekt gesehen, was schon etwas älter ist... (https://github.com/dbushell/Responsive-Off-Canvas-Menu)
Ich habe das schon in meine Datei eingebaut, da mir das Design gefällt, Habe aber im css Code nichts geändert.
Mein Problem: Da bei mir noch nicht alle Seiten komplett bis unten hin gefüllt sind und es auch nicht sein werden, ist jetzt meine Frage, ob mir jemand von euch sagen kann wo ich in den Dateienen etwas ändern muss.
Es geht hierbei nur um die Mobile Seite, bei der Desktop Ansicht ist alles ok

 

[MrMurphy]

Hallo

Da bei mir noch nicht alle Seiten komplett bis unten hin gefüllt sind und es auch nicht sein werden, ist jetzt meine Frage, ob mir jemand von euch sagen kann wo ich in den Dateienen etwas ändern muss.

Ich verstehe nicht was du damit meinst. Hast du einen Link zu der Seite?

Gruss

MrMurphy

 

[Ehemaliger Benutzer 33785]

Ja der Link ist der folgende: https://github.com/dbushell/Responsive-Off-Canvas-Menu

 

[MrMurphy]

Hallo

Du hast das Problem mit deiner Seite. Entsprechend benötigen wir einen Link zu deiner Seite.

Außerdem weiß ich noch immer nicht was du mit

Da bei mir noch nicht alle Seiten komplett bis unten hin gefüllt sind und es auch nicht sein werden, ist jetzt meine Frage, ob mir jemand von euch sagen kann wo ich in den Dateienen etwas ändern muss.

meinst.

Gruss

MrMurphy

 

[djheke]

Ich nehme mal an, er möchte, dass sein Footer bei wenig Inhalt immer am unteren Rand ist.
Oder?!

 

[Ehemaliger Benutzer 33785]

Ja genau, das ist es..

Ich habe die Webseite nur lokal bei mir auf dem Raspberry Pi, habe aber die CSS und JS Dateien nicht geändert.

 

[MrMurphy]

Hallo

Dann suchst du "Sticky Footer". Das ist ein Oberbegriff für unterschiedliche Lösungen. Gemeinsam ist allen, dass der Footer auch bei wenig Inhalt immer am unteren Fensterrand angezeigt wird und bei viel Inhalt (oder kleinerem Fenster / Bildschirm) nach unten gedrückt wird und beim Scrollen erst nach dem Inhalt angezeigt wird.

Welche der Lösungen davon für dich in Frage kommt hängt von deinen CSS-Kenntnissen und deinen sonstigen Anforderungen ab.

Gruss

MrMurphy

 

[Ehemaliger Benutzer 33785]

Danke, werde es morgen oder am Wochenede mal austesten...

 

[MrMurphy]

Hallo

Ich habe mal für die finale Version (step4.html) eine Lösung mit dem Flexbox-Modell erstellt. Dazu muss am Ende des head-Bereichs der step4.html

   <![endif]-->
</head>

folgendes eingefügt werden:

   <![endif]-->
   <style>
   * {
      box-sizing: border-box;
   }
   body {
      display: -ms-flexbox;
   }
   #inner-wrap {
      height: 100%;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
   }
   #main {
      flex: 1 0 auto;
   }
   </style>
</head>

Das wäre es dann auch schon.

Die erforderlichen CSS-Anweisungen

   * {
      box-sizing: border-box;
   }
   body {
      display: -ms-flexbox;
   }
   #inner-wrap {
      height: 100%;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
   #main {
      flex: 1 0 auto;
   }

können natürlich stattdessen auch in die step4.css eingetragen werden. Dann musst du aber darauf achten, dass sie von bereits vorhandenen CSS-Anweisungen nicht überschrieben werden.

Gruss

MrMurphy

 

[Tronjer]

Hmm, wieso kombinierst du height: % mit min-height: vh?

 

[MrMurphy]

Hallo

Um Probleme mit unterschiedlichen Browsern sowie viel und wenig Inhalt zu vermeiden.

Bei wenig Inhalt soll das gesamte Fenster ausgefüllt sein, aber keine Scrollbalken erscheinen.

Bei viel Inhalt (mehr als die Fenstergröße) sollen Hintergrundfarben nicht plötzlich aufhören wenn gescrollt wird.

Und das in allen relavanten Browsern.

Diese Kombination hat sich dafür als praxisgerecht erwiesen und die meisten genannten Probleme treten gar nicht erst auf.

Gruss

MrMurphy

 

[Ehemaliger Benutzer 33785]

Vielen Dank für deine Hilfe MrMurphy, habe es gerade ausprobiert und es funktioniert mega gut... DANKE