Einen fixed Header oder Footer mit CSS erstellen (CSS Anleitung Deutsch)

Heute möchte ich euch zeigen wie ihr ein sogenannten Fixed Footer oder Fixed Header in eure Webseite einbauen könnt. Ihr habt das sicher schon öfter gesehen, denn es ist ein Designelement das wirklich sehr gerne verwendet wird. Wenn man nämlich viel Inhalt auf die gleiche Seite packt, dann muss man sehr schnell sehr weit scrollen. Das Scrollen stört vielleicht nicht wenn man am Computer sitzt und eine Maus hat, aber an einem Smartphone bricht man sich damit fast immer den Daumen 🙂 Das ist ja natürlich sehr unschön.

Und aus diesem Grund zeigt man Menu oder Footerinhalte halt gerne als Fixed Element an – oder man macht ein Pfeil nach Oben als Fixed Element.

Hier im heutigen Beitrag zeige ich euch alles was ihr braucht, damit ihr ein eigenen Fixed Footer oder Fixed Header erstellen könnt.

Video

HTML

<div class="header">
        ich bin das menu
    </div>
<div class="container">
        <h1>Fixed Footer</h1>
        <h2>Hello</h2>
        <p>Lorem, ipsum dolor sit</p>
</div>
<div class="footer">
    created with love by Eric Mächler
</div>

CSS

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #bde0fe;
    text-align: center;
    height: 50px;
    padding-top: 20px;
}

.header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background-color: #bde0fe;
    text-align: center;
    height: 50px;
    padding-top: 20px;
}