Skip to content

»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/)

Leave a comment

Available formatting commands

Use Markdown commands or their HTML equivalents to add simple formatting to your comment:

Text markup
*italic*, **bold**, ~~strikethrough~~, `code` and <mark>marked text</mark>.
Lists
- Unordered item 1
- Unordered list item 2
1. Ordered list item 1
2. Ordered list item 2
Quotations
> Quoted text
Code blocks
```
// A simple code block
```
```php
// Some PHP code
phpinfo();
```
Links
[Link text](https://example.com)
Full URLs are automatically converted into links.

Replied on your own website? Send a Webmention!

Loading ...