Sticky Footer


I want to implement a sticky footer on my site. I found this bit off code on CSS-Tricks:

html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1 0 auto;
}

I'm new here and I'm just wondering if someone can walk me through how to implement this. I tried to substitute .content with .tm-main, but it didn't work. Any help would be much appreciated.


Hi peeps,

I'd also like to use a sticky footer. By a sticky footer, I mean a footer which is at the bottom of the viewport, unless there is content which extends below the bottom of the viewpoort, where the footer should then appear below the content (The main problem this solves is to push the footer to the bottom of the viewport when there is little or no content to display.). I hope that makes sense.

My current project has a full screen image slidewhow on the home page and I'm having problems getting the footer to be at the bottom for the screen on all devices (because there is no content in main content section). I've searched around on these forums and have also searched for UIKit related things, but nothing I try is working.

This must be an issue which others have already solved, so any ideas or advice on what to try next would be greatly appreciated.

All the best, ~ Rik



Hi Paal,

Thanks for the link, I had seen your post in my searching actually.

I've tried several things, but nothing really works very well for pages without enough content to push the footer down. I had to make sure each page has enough content and to use position: fixed for the footer on my home page which has no content (because of a full page background image).

All the best, ~ Rik


Hey Rlk

Please post in this thread when you find code that does it even better then the code I shared.

Have a great weekend!

Paal Joachim


Write a reply

Login or register to write a reply, it's free!