Sticky Footer bei einem responsiven Design

  • So, ich hab mal die Variante von wolf ausprobiert. Funktioniert leider aber nicht, außer ich hab irgendwas falsch gemacht.


    Fest steht, dass es gerade so aussieht: Klick


    Das Problem ist, dass jetzt aus irgendeinem Grund der Footer nach unten geschoben wurde (auch, wenn ich den Text nicht drin habe) und weiterhin schiebt sich der Footer nicht nach unten, wenn ich eben den Text hinzufüge.


    Den Code hab ich im ersten Post wieder aktualisiert. Weiß jemand woran es liegen könnte?

  • Du hast meine Umsetzung nicht genau angeschaut oder nicht verstanden..
    Es ist wichtig das der Wrapper alles außer den footer umfasst und mindestens so hoch ist wie der (viewport - footer)..!

  • Achso, sry. Nachdem ich gestern bemerkt hab, dass es nicht funktioniert, hab ich erstmal noch die alte Version wieder hochgeladen. Hab nicht dran gedacht, dass jemand vorbeischaut und als du dann den Link wolltest, hat es bei mir anscheinend auch nicht Klick gemacht. :whistling:


    Lade dann aber gleich wieder die richtige Version hoch... :)



    Edit: Hab die Version hochgeladen. Sollte also wieder passen...

  • Irgendwas in deinem Wrapp ist höher als die min-height..!
    Wenn du max statt min schreibst, siehst du das es passen würde..


    An deiner Stelle würde ich mit einer solchen Struktur anfangen:


    Dann kannst du mit der Flexbox arbeiten und hast keine Probleme mehr mit höhenangaben im Content..!


    Hier noch mal den header etwas genauer:

  • Irgendwas in deinem Wrapp ist höher als die min-height..!
    Wenn du max statt min schreibst, siehst du das es passen würde..


    Ja, sowas in die Richtung dachte ich mir auch. Ich werde wohl nochmal auf die Suche gehen müssen...



    Bzgl. deiner vorgeschlagenen Struktur und der Flexbox: Ich überlege mir das definitiv mal. Auf jeden Fall vielen Dank für deine Mühe, die du dir gemacht hast. :)

  • Guten Morgen zusammen,


    Also: Ich hab mich jetzt dazu entschieden, mit der Flexbox weiterzuarbeiten. Hab auch bereits schon damit angefangen, mir das alles bisschen anzugucken.


    Aktuell bin ich jetzt dabei eine Beispiel-Seite zu erstellen, wo ich die Flexbox nutze. Doch leider bin ich wieder auf mein altbewährtes Problem gestoßen - den Footer. :D


    Ich hab bisher zwei Fragen:


    1. Wie kann ich bei der Flexbox einen Sticky Footer umsetzen? Ich hab einmal eine Variante gefunden, wo man dem Wrapper die min-height: 100vh; zuweist und dann der Content-Wrapper flex: 1; zugewiesen bekommt. Aber entweder hab ich was falsch gemacht oder es funktioniert nicht.


    2. Gibt man den Flex-Items, also z.B. Header etc., eine Höhe in Prozent oder wird die Größe nur durch die Flex-Eigenschaft, also z.B. flex: 4; bestimmt?


    Das ist mein bisheriger Stand (ohne Sticky Footer und mit height-Angaben):




    Schon mal vielen Dank für die Hilfe. :)


    Gruß
    JR Cologne

  • Hallo


    Zitat

    Ich hab einmal eine Variante gefunden, wo man dem Wrapper die min-height: 100vh;


    Wo gefunden? Wrapper sind nur "erfunden" worden um Webseitenentwickler zu nerven und sollten in der Regel weggelassen werden. Sie sind, von Ausnahmen abgesehen, schlicht unnötig. Ein natürlicher und immer vorhandener Wrapper ist das body-Element.


    Zitat

    Gibt man den Flex-Items, also z.B. Header etc., eine Höhe in Prozent


    Die Höhe eines Containers richtet sich nach seinem Inhalt. Höhenangaben sind in der Regel unsinnig und sollten unterbleiben.


    Von Ausnahmen abgesehen. Eine solche Ausnahme ist das Element (und nur das) welches den footer bei wenig Inhalt nach unten drücken soll.


    Das ist in deinem Fall das div "content_wrap". Welches ich persönlich einfach mit der id "inhalt" bedenken würde. Eine id ist inhaltsleer und warum kompliziert wenn es auch einfach geht.


    Dein "content_wrap" bzw. mein "inhalt" bekommt zum Ausdehnen die Anweisung


    CSS
    flex: 1 0 auto;
             -ms-flex: 1 0 auto; /* Für alle IE, muss hinter "flex: 1;" stehen */


    Hinweis:


    CSS
    flex: 1;


    reicht vornehmlich auch, aber das ist technisch doch etwas anderes als nur


    CSS
    flex: 1 0 auto;


    und kann in bestimmten Konstellationen zu Problemen führen.


    Ähnliches gilt dafür, dass die Anweisung mit dem Prefix hinter der Anweisung ohne Prefix steht. Das ist im Regelfall unsinnig, hat in diesem Fall aber technische Gründe.


    Gruss


    MrMurphy

  • Wo gefunden? Wrapper sind nur "erfunden" worden um Webseitenentwickler zu nerven und sollten in der Regel weggelassen werden. Sie sind, von Ausnahmen abgesehen, schlicht unnötig. Ein natürlicher und immer vorhandener Wrapper ist das body-Element.


    Alles klar. Dann nehme ich den Body als Wrapper.


    Die Höhe eines Containers richtet sich nach seinem Inhalt. Höhenangaben sind in der Regel unsinnig und sollten unterbleiben.


    Ok, das bedeutet, dass ich die Höhe nur mit der Eigenschaft flex: 1; (Beispiel) bestimmen kann. Weil ich möchte ja nicht, dass die Flexbox alle Container automatisch gleichgroß darstellt.


    Von Ausnahmen abgesehen. Eine solche Ausnahme ist das Element (und nur das) welches den footer bei wenig Inhalt nach unten drücken soll.


    Ja, das ist logisch.


    Das ist in deinem Fall das div "content_wrap". Welches ich persönlich einfach mit der id "inhalt" bedenken würde. Eine id ist inhaltsleer und warum kompliziert wenn es auch einfach geht.


    Naja, gut. Wie ich das dann benenne, ist ja wohl relativ egal.


    flex: 1 0 auto;
    -ms-flex: 1 0 auto; /* Für alle IE, muss hinter "flex: 1;" stehen */


    Super, vielen Dank. Ich hoffe mal, es klappt. :)

  • Hallo


    Zitat

    Ok, das bedeutet, dass ich die Höhe nur mit der Eigenschaft flex: 1; (Beispiel) bestimmen kann.


    Nein. Du kannst die Höhe natürlich auch anders bestimmen. Es ist in der Regel nur weder nötig noch sinnvoll.


    Zitat

    Weil ich möchte ja nicht, dass die Flexbox alle Container automatisch gleichgroß darstellt.


    Nein. Flexbox gibt den Containern automatisch nur den Platz den ihr Inhalt erfordert. Damit ein Container mehr Platz bekommt musst du eingreifen. Siehe zum Beispiel



    Du hast die Frage


    Zitat

    Wo gefunden?


    noch nicht beantwortet.


    Gruss


    MrMurphy

  • Nein. Du kannst die Höhe natürlich auch anders bestimmen. Es ist in der Regel nur weder nötig noch sinnvoll.


    Ja, klar. Hätte eher "sollte" statt "kann" schreiben sollen.


    Nein. Flexbox gibt den Containern automatisch nur den Platz den ihr Inhalt erfordert. Damit ein Container mehr Platz bekommt musst du eingreifen. Siehe zum Beispiel


    Ähh, ja. Hab mich vertan. Vielleicht sollte ich erstmal das Gehirn anschalten, bevor ich was poste. :D


    Zitat


    Wo gefunden?


    Irgendwo im WWW. :D Ist aber doch jetzt auch völlig egal. Falls du es aber unbedingt wissen willst, kann ich nochmal gucken, ob ich es wiederfinde.

  • So, ich habs jetzt mal überarbeitet:




    Das sieht erstmal eigentlich ganz gut aus: Klick


    Aber wenn ich z.B. einen zweiten Artikel hinzufüge, also mehr Content hab, sieht es so aus: Klick


    Da sieht man dann, dass sich die Höhe von allen Elementen total verändert hat. Das wäre ja schrecklich, wenn man z.B. nur einen Beitrag in seinem Blog schreibt, den hochlädt und dann plötzlich das gesamte Design ganz anders aussieht. :D


    Was hab ich falsch gemacht? Ich möchte ja, dass der Footer runtergeschoben wird und nicht, dass alles sich einfach so anpasst, dass man nicht mehr scrollen muss.

  • Hallo



    Zitat

    Was hab ich falsch gemacht?


    Keine Ahnung. Es gibt verschiedene Möglichkeiten einen Sticky Footer mit Flexbox zu erreichen. Und die Vorlage deiner Quelle zeigst du trotz Nachfrage nicht. So ist Hilfe natürlich schwer möglich.


    Und ich frage mich natürlich warum ich


    CSS
    #content_wrap {
    ...
    min-height: 70%;
    }


    lese, obwohl ich


    Zitat

    Höhenangaben sind in der Regel unsinnig und sollten unterbleiben.


    geschrieben habe. Mit solchen Angaben zwingst du die Browser dazu anders zu rechnen als vorgesehen. Dann bekommst du natürlich manchmal auch unerwartete Ergebnisse.


    Zitat

    Aber wenn ich z.B. einen zweiten Artikel hinzufüge, also mehr Content hab, sieht es so aus


    Deshalb schreibe ich mir doch die Finger wund, erst mal den Inhalt zu erstellen und dann das Layout.


    Gruss


    MrMurphy

  • Keine Ahnung. Es gibt verschiedene Möglichkeiten einen Sticky Footer mit Flexbox zu erreichen. Und die Vorlage deiner Quelle zeigst du trotz Nachfrage nicht. So ist Hilfe natürlich schwer möglich.


    Ich weiß die Quelle nicht mehr, aber wenn die dir so wichtig ist, mach ich mich nochmal auf die Suche.


    Edit: Habs gefunden. Hier ist der Link: Klick



    Warum schreibst du dann...


    Von Ausnahmen abgesehen. Eine solche Ausnahme ist das Element (und nur das) welches den footer bei wenig Inhalt nach unten drücken soll.


    Das ist in deinem Fall das div "content_wrap".


    ? Da schreibst du nämlich ausdrücklich, dass der content_wrap eine Ausnahme ist.


    Edit: Wenn ich die min-height rausnehme, kommt zumindest, wenn ich den zweiten Artikel auch noch drin habe, das selbe raus.


    Deshalb schreibe ich mir doch die Finger wund, erst mal den Inhalt zu erstellen und dann das Layout.


    Das soll doch nur eine Übung sein und keine komplette Website. Macht also wenig Sinn noch unendlich viel Content hinzuzufügen.

  • Also, die Ausnahme ist der Fall, das der footer BEI WENIG INHALT nach unten gedrückt wird und nicht immer...


    Egal ob Übung oder nicht, IMMER mit Content Arbeiten und wenn es nur Fülltext ist -> http://meettheipsums.com/


    Die Flexbox eignet sich sehr gut um horizontale Aufteilungen zu erwirken, genau so gut um vertikale Aufteilungen zu treffen ABER man sollte im Normalfall einfach das mit der Vertikalen Aufteilung am besten dem Browser überlassen oder allerhöchsten mit min-height arbeiten..
    Fertig aus, basta, Thema beendet :D

  • Hallo


    Zitat

    Da schreibst du nämlich ausdrücklich, dass der content_wrap eine Ausnahme ist.


    Aber doch mit Flexbox und nicht mit height oder min-height. Darum ging es doch die ganze Zeit.


    Zitat

    Dann mach ich das wohl mit der min-height...


    Deine Entscheidung.


    Gruss und viel Erfolg


    MrMurphy

Jetzt mitmachen!

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