Material-design-lite: [Component Request] Sticky Footer

[urbanvikingr]

Description
I would like to request additional feature to footers. Could we make the footers sticky the footers to bottom when content doesn't fill the whole page. When the content fills the pages, the footer is push down and scrolling is enabled.

Implementation Suggestion
The implementation can be done in different ways. This is one suggestion http://www.cssstickyfooter.com/using-sticky-footer-code.html

[mukilane]

This is not a part of the Material Design Spec.

[will-stone]

I am also looking for this behaviour.

[Garbee]

We need to get with the MD team to see if this is something that could be specified. Otherwise it seems out-of-scope for us to support.

[will-stone]

I tweaked some CSS and got it working: http://jsfiddle.net/eggbox/gk7u32b6/ Not sure if this will break anything else though.

[surma]

@eggboxio Thanks for trying to figure this out. You used the same approach I did a while ago, but I was and still am hesitant to force display: flex on to everyone using layout. At this point this is most likely a breaking change to anyone using the layout component.

[Garbee]

We would have other options if we were to implement it. That is at least one way people looking for this can use now to get the effect if it works in their case.

[will-stone]

I've updated the fiddle to use a spacer. The layout__content still needs to be changed to flex, but there's less CSS disruption and seems a more MDL-way of going about things.

[will-stone]

Have just found out my solution doesn't work on Safari (not sure about other Webkit browsers), whereby the footer will appear behind content when the content is longer than the fold.

[urbanvikingr]

Unfortunately, this behavior is seen on Chrome, too. The sticky footer isn't pushed down when content fills the page.

@Garbee Which other options were you referring to?

[zuhairnaqvi]

Any progress on pushing the footer down when content is longer than the fold?

[urbanvikingr]

This works for me: http://ryanfait.com/sticky-footer/

[zuhairnaqvi]

Seems to be messing up the layout of mega-footer.. I just need it to not behave as position:fixed, it's practically useless as it's overlapping the content in main when the content is longer than the viewport :(

[jfily]

Fixed the "problem" adding this css :

.mdl-layout__content {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: column nowrap;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
}

.mdl-layout__content > *:not(.mdl-layout-spacer) {
-webkit-flex: none;
-ms-flex: none;
flex: none;
}

[hash9]

This works just fine..hope it helps

.mdl-mega-footer {

position: absolute !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
}

[Fcmam5]

This works :+1: for me:
http://jsfiddle.net/eggbox/gk7u32b6/

Using:

.mdl-layout__content { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; }

And by adding a spacer before closing <main> tag:

        <div class="mdl-layout-spacer"></div>

[sgomes]

Footers are not a part of the Material Design spec and will likely go away in v2.