Material-design-lite: Does footer go inside "main" or mdl-layout?

Created on 30 Sep 2015  路  8Comments  路  Source: google/material-design-lite

http://www.getmdl.io/components/index.html#layout-section/footer doesn't show where "footer" goes inside.

Documentation Footer

Most helpful comment

Does anyone know how to make the footer both scroll off the page and be stuck at the bottom of the screen in the case when your app content is not very tall?

All 8 comments

It goes inside of mdl-layout__content

So "footer" is inside mdl-layout__content, but "header" is outside. How strange!

Oh funny.
When it is inside, it scrolls off the bottom of the page.
When outside, it attaches to the bottom of the screen.
Good to document.

Does anyone know how to make the footer both scroll off the page and be stuck at the bottom of the screen in the case when your app content is not very tall?

You could play around with body min-height: 100% or 100vh.

@acgourley I usually do what @sdcinglis suggested:

body {
  min-height: 100vh;
}

I also came across this issue when working with the --fixed-drawer because I noticed that the footer didn't have a left margin of 240px but it did when in __content but I prefer it to be on the bottom of the page. Just to note in case someone else comes across it.

The core team is focusing on V2 work, therefore v1 issues that are non-critical won't be addressed. As such, closing this out. If someone from the community wants to improve the documentation here, mdl-1.x is open for PRs.

Thank you.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

raffomania picture raffomania  路  4Comments

rafaelcorreiapoli picture rafaelcorreiapoli  路  3Comments

brandonjpierce picture brandonjpierce  路  3Comments

samuelcarreira picture samuelcarreira  路  4Comments

tleunen picture tleunen  路  5Comments