Test mit Flexboxen: Problem mit den Boxen beim scrollen.

  • Hallo beisammen,


    bin gerade dabei eine Webseite mal mit Flexboxen zu erstellen (und nicht traditionell mit float).

    Wenn ich gewusst hätte, wie einfach das ist, hätte ich das sofort so gemacht.

    Einen interessanten Punkt aber habe ich dabei entdeckt, der mich ein wenig irritiert:


    Ich gebe beim ersten Aufbau den Bereichen immer eine Farbe mit. So weit so gut. Irgendwann gebe ich dann in den Inhalt (meist im article) richtig viel Text ein um zu sehen wie der rauskommt.

    Dabei ist mir folgendes aufgefallen:

    --> wenn ich nach unten scrolle werden die definierten Farbbereich abgeschnitten! Das Ganze passiert bei IE und Google Chrome (!!!). Nicht bei Firefox und Edge!

    html-seminar.de/woltlab/attachment/1435/

    (Bitte um Nachsicht mit dem krakeligen Textmarker)


    Falls sich einer das anschauen möchte: Test-mit-Flexboxen-farblich-abgeschnitten.


    Kann mir da einer einen Hinweis geben, wie man das umgehen kann?


    Danke schon jetzt für die Hilfe.


    olkostbe

  • Sorry, habe es gerade selbst gemerkt geprüft und schon geladen (deswegen hat DER auch nichts gemerkt).


    height: auto;


    oder auch wie MrMurphy vorgeschlagen hat ganz darauf verzichten.

    Danke trotzdem. Ihr wart wieder super schnell.


    Getestet bei Edge, Firfox und Google Chrome.


    Kleiner Wehrmutstropfen: Bei IE 11 fliegen die Farben bei den Zeilenflexboxen bei beiden Varianten raus. Na ja, seis drum - Microsoft halt.

  • Sind jetzt alle Probleme gelöst? Bei mir sieht es jetzt so aus:

    html-seminar.de/woltlab/attachment/1436/

    Ist das Browserfenster hoch, entsteht zwischen #middle und footer freier Raum.

    Den kannst Du vermeiden, indem Du die Höhe von #wrapper auf 100vh setzt.

    Außerdem empfehle ich, konsequent zu sein, wenn Du Flexlayout einsetzt und auf die absolute Positionierung des footer zu verzichten.

    Ist die Höhe des Fensters geringer, verschwindet unten der Text. Ich empfehle, diesen Container mit overflow-y:auto scrollbar zu machen.

  • Mit diesem CSS:

    Sieht es so aus:

    html-seminar.de/woltlab/attachment/1438/

    Nur der mittlere Container ist scrollbar, bei unterer Scrollposition ist nichts verdeckt.

    Auch im Header kann man auf die absolute Positionierung des Bildes und die feste Höhe verzichten, wenn man Flex verwendet.

    Auf die Slideshow habe ich jetzt nicht so das Augenmerk gerichtet.

  • Ich finde das Nutzer-technisch sehr schlecht. Du musst die Maus im Container haben, um scrollen zu können. Das ist ganz schlecht. Daher empfehle ich wirklich den Footer mit "position" ganz in ruhe zu lassen, so dass er sich einfach nach den anderen Element der Seite ausrichtet. Wenn ein wenig mehr Inhalt auf der Seite währe, gäbe es auch keine weißen Flächen, und dann würde die Seite vollständig aussehen.


    PS: Hast die "position" Ja bereits entfernt. Gut. Allerdings finde ich das mit dem scrollen noch immer Kritisch. Die ganze Seite sollte einfach scrollbar sein.

  • Die ganze Seite sollte einfach scrollbar sein.

    Ich glaube das ist geschmacks sache.In diesen Fall reicht es ja wenn der mittlere Teil Scrollbar ist .Wenn die Seiten auch noch vol wäre mit Text dann wäre eine komplett scrollbare Seite vieleicht schöner.Aber halt geschmacks sache .Ich finde den Scrollbalken in der mitte auch häslich ,dann lieber an der Seite. Oder Seite Scrollbar machen ohne Scrollbalken. Auch schön

  • Bei mir liegt das Problem dann eher an der Usability der Seite. Man muss mindestens mit der Maus in dem Bereich sein, und es unter Umständen auch noch fokusiert haben, damit man scrollen kann.


    Und ja, eine Windows Scrollbar mitten in der Seite sieht zudem auch noch verdammt hässlich aus. Weshalb ich auch am überlegen bin, ob sich eine JS Scrollbar bei meinem derzeitigem Projekt lohnen würde.

  • Ja kommt drauf an.Bevor man nee scrollbar in der mitte hat würde ich nach einer anderen Lösung suchen . Ist genau so doof wenn man links eine Navigation hat mit Scrollbar,die geht dann auch zur mitte hin .Da sollte man auch die scrollbar dann links am rand machen.Man kann so viele schöne sachen machen,man muß nur wissen wie.

    Nur eins geht gar nicht ,gefixten footer,der nervt einfach nur.X(

  • Ups, ganz schön viel los nach dem Tag auf Arbeit in meinem bescheidenen Thema.


    Zuerst: Vielen Dank für Eure Mühe.


    Das Script von Sempervivum hat mich ein wenig inspiriert und habe auch gelernt.

    Der Scrollbalken zum Beispiel: Habe mich immer gefragt wie das wohl geht -> Jetzt habe ich das Prinzip verstanden! Danke dafür. Auch wenn ich das mal separat austesten muss.


    Am Ende habe ich mich dafür entschieden den Scrollbalken vorerst nicht zu verwenden (zumindest ist das heute meine Stimmung dazu. Vielleicht schlafe ich da nochmals drüber)


    Auch Eure Hinweise zu dem fixierten footer waren interessant. Der Footer war aber nocht nicht mal ansatzweise "fertig", noch nicht mal als Draft. Daher ist der Text auch abgeschnitten. Ich bin damit noch nicht fertig.


    Zum fixierte Fußbereich:

    Ich bin aus der konservativen Abteilung was so was angeht (komme aus der Druckindustrie ursprünglich und durfte noch Bleisatz mal für einen Tag lernen). Ich finde, dass ein Fußbereich immer sichtbar sein sollte. In diesem Fußbereich kommen die wichtigsten Info in sehr eingedampfter Form. Für mich ist so eine HP wie eine Seite aus einem Buch. Da sollte unten auch das Wichtigste (Name, Telefonnummer, etc.) mal drin stehen.


    Aber das sind nur meine 5 cents.

  • Das muß ja auch jeder selber wissen wie er seine hp stylt.


    Das Script von Sempervivum hat mich ein wenig inspiriert und habe auch gelernt.

    Der Scrollbalken zum Beispiel: Habe mich immer gefragt wie das wohl geht -> Jetzt habe ich das Prinzip verstanden! Danke dafür. Auch wenn ich das mal separat austesten muss.

    So haben es wohl die meisten gelernt.Einfach mal testen was passiert wenn man x und y verändert.

    Du kannst den Scrollbalken auch weg lassen und die Seite trotzdem Scrollen.Nur der Nachteil ist ,es weiß keiner das es dann scrollbar ist .Die leute kennen nur die scrollbar ,und wenn keine da ist ,gibts auch nix zu scrollen .Ganz einfach .

    Ja ,so ist das .bei fragen kannst du immer fragen ,wir helfen gerne

  • Hallo Basti;


    weiß ich doch, dass am Ende jeder selbst für seine HP verantwortlich ist.

    Finde es einfach toll hier im Forum. Ich tue mich zwar immer noch schwer, da ich als Generation "analog" immer noch Schwierigkeiten habe bei Unklarheiten keinen zu haben den man quasi Aug in Aug oder Ohr zu Ohr befragen kann, aber hier fühle ich mich wohl.


    Tja und jetzt geht es wieder in die analoge Welt der Arbeit.

    Viel Spass an Alle; - werde wohl erst wieder nächste Woche in der Lage sein, weiter an meinen Projekten zu arbeiten (family comes back home ^^). Dann aber will ich Mal Dein LKW Script Vorschlag anschauen.


    olkostbe

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!