Ka Rl Ka Rl - 22 days ago 10
CSS Question

Google Material Design footer always at the end of the page/ at the bottom

I am currently facing a problem with Google Material Design Lite. If you take a look at the portfolio example from Google https://getmdl.io/templates/portfolio/about.html and simulate a large screen the footer doesn't stay at the bottom. Is there a solution for this?

I found two similar questions but they were about a sticky footer. I would like to have the footer always at the end of the page and if the page is scrollable, the footer should only visible when you are at the bottom.

Answer

You need to put your set a specific min-height to .mdl-grid.portfolio-max-width,

Just like:

/* When the Navbar is big  */
.mdl-grid.portfolio-max-width {
  min-height: calc(100vh - 316px);
}

/* When the Navbar is small  */
.mdl-grid.portfolio-max-width {
  min-height: calc(100vh - 180px);
}

This will work.

Hope this helps!

EDIT

Final solution for me:

/* When the Navbar is big  */
.mdl-grid.portfolio-max-width {
  min-height: calc(100vh - 316px);
  display: block;
}

/* When the Navbar is small  */
.mdl-layout__content.header-is-compact > .mdl-grid.portfolio-max-width {
   min-height: calc(100vh - 137px);
}

and the following lines to the scroll handler in the MDL JavaScript file:

this.content_.classList.add('header-is-compact');
// the following line to the else if where all the classes get removed
this.content_.classList.remove('header-is-compact');

Comments