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.

  • 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
    1. bottom: 0;
    2. 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
    1. body {
    2. margin: 0;
    3. min-height: 100vh;
    4. display: flex;
    5. flex-direction: column;
    6. justify-content: space-between;
    7. }

    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.)