zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Fixed Header bei FlexBox möglich?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 24.04.2017, 12:28
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.07.2015
Beiträge: 12
BadCat befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 24.04.2017, 12:42
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Natürlich ist das möglich, wieso sollte das auch nicht so sein?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 24.04.2017, 13:01
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.07.2015
Beiträge: 12
BadCat befindet sich auf einem aufstrebenden Ast
Standard

O.k. ich habe es bisher so probiert:

HTML-Code:
#header {position:fixed;top:0;left:0;display:flex;}
Klappt aber nicht wirklich. Der Header ist zwar fixed, aber die restlichen Div Container sind verschoben.

Wenn ich das display:flex weglasse wird es auch nicht besser.
Mit Zitat antworten
  #4 (permalink)  
Alt 24.04.2017, 13:08
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 24.04.2017, 15:24
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Der Header ist zwar fixed, aber die restlichen Div Container sind verschoben.

Wenn ich das display:flex weglasse wird es auch nicht besser.
Herrlich.

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)
Mit Zitat antworten
  #6 (permalink)  
Alt 24.04.2017, 15:27
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von MrMurphy Beitrag anzeigen
Da mit position: fixed;
Besser ist, position:sticky zu verwenden. Damit entsteht das Problem mit dem fehlenden Leerraum vor einem Container nicht.
Mit Zitat antworten
  #7 (permalink)  
Alt 24.04.2017, 17:51
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.07.2015
Beiträge: 12
BadCat befindet sich auf einem aufstrebenden Ast
Standard

Super, danke für eure Ideen. Schaue sie mir an.
Mit Zitat antworten
Antwort

Stichwörter
fixed header, flexbox, sticky header

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:14 Uhr.