Springe zum Inhalt

»Sticky footers« are somewhat common in web design and are a reoccurring problem to solve. A sticky footer ensures, that the page footer (copyright, meta navigation, social links etc.) sticks to the bottom of the viewport, when a page has very little content or the viewport is very tall. Because it would look quite odd, when your footer floats around mid-window.

Luckily, CSS has evolved a lot over the last years and things have become a lot easier than just a few years ago. In a recent article on CSS Tricks, I think this is the most elegant technique that I’ve come across so far (probably invented by Sílvio Rosa):

I haven’t used it in a project yet, but it seems to have less side-effects than using Grid or Flexbox. Though I must admit, that it’s actually not that intuitive, so I would always add a comment when doing something like this:

html, body {
  height: 100%;
}

body > footer {
  position: sticky;
  top: 100vh;
}

(Source: https://css-tricks.com/a-clever-sticky-footer-technique/)

Hinterlasse einen Kommentar

Verfügbare Formatierungen

Benutze Markdown-Befehle oder ihre HTML-Äquivalente, um deinen Kommentar zu formatieren:

Textauszeichnungen
*kursiv*, **fett**, ~~durchgestrichen~~, `Code` und <mark>markierter Text</mark>.
Listen
- Listenpunkt 1
- Listenpunkt 1
1. Nummerierte Liste 1
2. Nummerierte Liste 2
Zitate
> Zitierter Text
Code-Blöcke
```
// Ein einfacher Code-Block
```
```php
// Etwas PHP-Code
phpinfo();
```
Verlinkungen
[Link-Text](https://example.com)
Vollständige URLs werden automatisch in Links umgewandelt.

Auf der eigenen Website geantwortet? Sende eine Webmention!

Wird geladen ...