Sticky Footer nur mit CSS erstellen

Um einen Sticky Footer in WordPress oder auch überall anders zu erstellen muss man folgenden CSS-Code zu seiner Seite hinzufügen:

margin-bottom: 2.5%;

position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: center;

Der Fußbereich muss dazu in <footer></footer> HTML-Tags. Und der CSS-Code muss entweder in deine style.css oder in <style></style> Tags. Wie du deine style.css Datei anlegen kannst erfährst du hier.

Ohne CSS-Code:

Ohne Sticky Footer Code

Mit CSS-Code:

Mit Sticky Footer Code

Durch den CSS-Code wird der Fußbereich unten an die Seite „geklebt“. Auch wenn man eine Seite hat auf welcher der Inhalt größer als eine Bildschirmseite ist wird der Fußbereich immer ganz unten am Bildschirmrand angezeigt.

Seite mit viel Inhalt ohne CSS-Code:

Seite mit viel Inhalt ohne Sticky Footer Code

Seite mit viel Inhalt mit CSS-Code:

Seite mit viel Inhalt mit Sticky Footer Code

Ich hoffe, dass ich dir helfen konnte. Weiterhin viel Spaß beim Coden 😉

11 Gedanken zu „Sticky Footer nur mit CSS erstellen“

  1. you’re in point of fact a just right webmaster. The website
    loading velocity is amazing. It kind of feels that you’re doing any unique trick.
    In addition, The contents are masterwork.
    you’ve performed a excellent activity on this topic!

  2. Hi there! I understand this is kind of off-topic however I had to ask.
    Does operating a well-established website like yours take a
    lot of work? I am completely new to running a blog but I do write
    in my diary daily. I’d like to start a blog so I can share my experience and thoughts online.

    Please let me know if you have any kind of recommendations or tips for new aspiring bloggers.
    Appreciate it!

  3. Fantastic beat ! I wish to apprentice while you amend your website, how can i subscribe for a blog web site?
    The account helped me a applicable deal. I had been a little bit acquainted
    of this your broadcast provided shiny transparent idea

  4. Great post. I was checking continuously this weblog and
    I’m inspired! Extremely useful info specifically the
    final phase 🙂 I care for such info a lot. I was seeking this certain info for a
    long time. Thank you and best of luck.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.