|
|||
Fixed Header bei FlexBox möglich?
Hallo,
ich möchte erreichen, dass beim Scrollen der Webseite der Header oben fest positioniert bleibt. Die Webseite basiert auf FlexBox. Ist das trotzdem möglich? Danke |
Sponsored Links |
|
|||
O.k. ich habe es bisher so probiert:
HTML-Code:
#header {position:fixed;top:0;left:0;display:flex;} Wenn ich das display:flex weglasse wird es auch nicht besser. |
|
|||
CSS ohne HTML ist leider nutzlos.
Bitte stelle den Code so zur Verfügung, dass wir das Problem auch nachvollziehen können, am Besten indem wir ihn einfach von hier auf zB jsfiddle.net kopieren. |
|
|||
Hallo
Zitat:
Aber zu deinem Problem: Bei einem fixierten header mit Flexbox ist die Vorgehensweise komplett anders, ohne position: fixed; Da mit position: fixed; der betroffene Container aus dem Textfluß genommen wird ensteht die unschöne Nebenwirkung, dass folgende Container keinen Abstand zu dem fixierten Container haben. Bei dem folgenden Container muss oben dann immer ein Leerraum eingefügt werden. Und zwar passend zur Höhe des fixierten Containers. Das erfordert bei responsive Layouts einen erheblichen Aufwand und bei Änderungen am header müssen die Abstände neu geregelt werden. Bei einem fixierten header (und / oder footer) mit Flexbox bleiben die Container wie üblich untereinander, also immer komplett sichtbar. Der Container mit dem Inhalt, der gescrollt werden soll, drückt dann die im Quelltext über ihn stehenden Container an den oberen und die unter ihm stehenden Container an den unteren Fensterrand. Das schöne: Die Lösung erfordert viel weniger Aufwand als bei Lösungen mit position: fixed; und eine Anpassung an die header- / footer-Höhe ist gleich mit "eingebaut". Nachfolgend der Link zu einem Beispiel, welches ich mal erstellt habe. Das gesamte CSS befindet sich im head-Bereich der Beispielseite. Die Seite oder deren Quelltext kann also direkt gespeichert werden und steht dann zum Testen oder als Vorlage auf den eigenen Rechner bereit. Worauf es speziell ankommt habe ich in der Webseite selbst beschrieben. Beispielseite Gruss MrMurphy Geändert von MrMurphy (24.04.2017 um 15:28 Uhr) |
Stichwörter |
fixed header, flexbox, sticky header |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
position:fixed klappt, zentrieren nicht | funkstrom | CSS | 3 | 06.10.2016 08:32 |
off canvas mit fixed Header | machomaaan | CSS | 2 | 07.03.2016 19:33 |
Layout zentriert - header und navi fixed | Fanello | CSS | 0 | 20.06.2013 15:02 |
Anfänger: mehrzeiliger fixed header | Spencer | CSS | 6 | 16.05.2012 13:24 |
header verrutscht... | weblearner | CSS | 6 | 03.12.2008 20:34 |