Move Footer To The Bottom

[HelloLudger]

On pages with little content, the footer ist not a real footer, just an element in the middle of the screen with margin-top: 10rem.

This codepen offers a solution to make it a real footer: https://codepen.io/cbracco/pen/kQmVGM (Not my code, btw. thx to the maker.) It doesn't work as general solution, because big footers need a bigger padding-bottom for the body. But still, maybe we can find something to make the footer always a real footer?

(I am not a css expert, that's why I love this project so much ;) )

[basteyy]

First, you are right, the linked solution is not working under every circumstance. A (more) solid solution would be a creation with flex box. The question is, do we really want to fix the footer ad the end? The specification points out, that there must be no classical "end of page footer" (https://html.spec.whatwg.org/multipage/sections.html#the-footer-element). But according to the most use cases (for example other css frameworks), the footer is sticked to the bottom.

I see three ways:

1. We don't change it
2. We fix the footer by default to the end of the page (but with a selector, which detect the "real" footer by body > footer)
3. We add another class (.sticky) to the body, which pulls the footer to the end. Be using a selector on the footer element, I see no solid and responsive way to stick it.

[emareg]

How about

body { display: grid; min-height: 100vh; }
body > footer { align-self: end; }

This seems to have all desired properties. However, I am not sure whether grid on the body has any negative side effects.

[basteyy]

From my understanding, grid is for a different use case. But to be honest: We can use it like that - it's quite a simple solution and grid is supported of almost 92% of every browser. In the case grid is used, I suggest adding the ms-prefix for a wider support.

The question is, should classless ship a default sticky footer or not. I find no reason to say no. Any further thoughts on that?

[HelloLudger]

How about

body { display: grid; min-height: 100vh; }
body > footer { align-self: end; }

This seems to have all desired properties. However, I am not sure whether grid on the body has any negative side effects.

Doing this vertically centered my main element. (For years, vertically centering anything was my dream in CSS, now it happens by mistake...) My solution for now was to add

header {
    display: contents;
}

[firdaus-aziz]

From my understanding, grid is for a different use case. But to be honest: We can use it like that - it's quite a simple solution and grid is supported of almost 92% of every browser. In the case grid is used, I suggest adding the ms-prefix for a wider support.

The question is, should classless ship a default sticky footer or not. I find no reason to say no. Any further thoughts on that?

For desktop, either sticky or non-sticky is OK.

But for mobile, sticky footer makes so much sense.

That is just my own personal and humble opinion. No statistic/data to back me up.

P/S: this CSS library rocks!