TIL: A Better Sticky Footer
19. November 2021
»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
Auf der eigenen Website geantwortet? Sende eine Webmention!