Footer mit dem Inhalt der Seite nach unten schieben

  • Hallo, ich habe einen footer, bottom: 0; position: absolute; .... blablabla

    Das Problem ist jetzt, dass der footer halt immer am Bildschirmrand unten klebt, auch wenn der Inhalt größer ist, als die Seite hoch. Wie mache ich es, dass der footer dann mit nach unten verschoben wird?


    Code:


    Vielen Dank für die Hilfe!

  • nur den Code vom footer zu posten bringt nicht sehr viel. Weiß doch keiner wie der rest aussieht. Wo ist den der footer bei dir ? Was sind seine Eltern ? Main ,body oder irgendein div ? Benutzt du flexbox ? Das sollteman schon wissen um dir genaue angaben machen zu können.


    EDIT : Na gut Flex benutzt du wohl ,aber den rest sollte man besser auch wissen.

  • Ich habe das ganze Projekt mal hochgeladen, zum posten wäre das bisschen viel (paar Bilder sind nicht da weil sonst zu viel Speicher benötigt würde)


    Axel Diese Seite habe ich schon mal gesehen, bin damit aber nicht sonderlich weiter gekommen

  • kann das sein das du deine cache nicht gelöscht hast. Bei mir wird der Footer immer unten angezeigt außer der Content hat keinen Inhalt . Aber das läßt sich noch ändern. Du sagtest das dein footer immer am Rand klebt als wenn er fixed wäre ?.

    Wie gesagt versuche doch mal cache zu löschen.

  • Nene das ist schon richtig, der Footer soll halt aber auch ganz unten angezeigt werden, wenn die Seite keinen Content hat.

    Wenn ich

    Code
    bottom: 0;
    position: absolute;      

    mache, wird er auch immer ganz unten angezeigt. Das Problem ist dabei nur, dass der Footer immer am unteren Bildschirmrand ist, auch wenn der Content länger ist als der Bildschirm hoch. Der Footer sollte dann ja unter den Content rutschen, tut er aber nicht.

  • Mit Flexbox sollte es auch sehr einfach umzusetzen sein. Aber hier mal mit display:table. In Anlehnung von Axel's Tutorial.

  • Versuche dieses CSS:

    Code
            body {
                margin: 0;
                min-height: 100vh;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }

    und dieses HTML:

    und prüfe, ob es dann das ist, was Du dir vorstellst.

    (contenteditable nur, um das Verhalten leicht testen zu können.)

Jetzt mitmachen!

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