Keeping footer at the bottom of the page using Google MDL

html css material-design-lite
CJK picture CJK · Oct 5, 2015 · Viewed 12.6k times · Source

As far as I can tell this isn't a duplicate question because it's a bit different than the other questions on this topic.

I'm using Google's Material Design Lite and the footer will not stay at the bottom of the page properly.

I've seen the different fixes using this trick

<div class="content">
    <div class="header"></div>
    <div class="body"></div>
    <div class="footer"></div>
</div>

and I've tried using this method

#footer {
   bottom: 0;
   width: 100%;
   position: absolute; (or fixed)
}

The first option doesn't work because Material Design Lite actually uses the footer tag. And to be honest I don't really want to do that anyway because it seems kind of sloppy to me.

The CSS method for the footer almost works but there are a few problems. When using position: absolute; it doesn't always keep the footer on the bottom of the page and it will sometimes cover content. When I try fixed the footer is always kept at the bottom of the page but when there is enough content for the page to scroll it stays at the bottom of the screen and covers content. Both fixed and absolute will keep the footer at the bottom of the screen not the page, which means that when there is enough content to scroll the footer covers content at the edge of the screen.

The behavior for fixed can be reproduced 100% of the time, but for absolute I haven't figured out what causes it to work sometimes and not others.

This is the code I have for the footer

<footer class="mdl-mini-footer">
    <div class="mdl-mini-footer--left-section">
        <button class="mdl-mini-footer--social-btn social-btn social-btn__twitter">
            <span class="visuallyhidden">Twitter</span>
         </button>
         <button class="mdl-mini-footer--social-btn social-btn social-btn__blogger">
            <span class="visuallyhidden">Facebook</span>
         </button>
         <button class="mdl-mini-footer--social-btn social-btn social-btn__gplus">
             <span class="visuallyhidden">Google Plus</span>
         </button>
     </div>
     <div class="mdl-mini-footer--right-section">
         <button class="mdl-mini-footer--social-btn social-btn__share">
             <i class="material-icons" role="presentation">share</i>
             <span class="visuallyhidden">share</span>
         </button>
     </div>
</footer>`

Has anyone else had this issue or have any ideas on a solution?

Edit to add more information:

The issue isn't with the height of the body or html they are both at 100%.

Full Layout Code

<body>
  <div class="site mdl-layout mdl-js-layout">           
    <header class="mdl-layout__header mdl-layout__header--waterfall">
        <div class="mdl-layout__header-row">
            <!-- Header Content Here -->
        </div>
    </header>
    <div class="mdl-layout__drawer">
        <!-- Drawer Content -->
    </div>
    <main class="mdl-layout__content">
         <!-- View Content Here -->
    </main>
    <footer class="mdl-mini-footer">
        <!-- Footer Content -->
    </footer>
    <div class="mdl-layout__obfuscator"></div>
  </div>
</body>

Answer

K.A.D. picture K.A.D. · Oct 27, 2015

I managed to do that by:

1. Without waterfall header

  1. Moving the footer element outside the main element
  2. Set the style of the .mdl-layout__content element to"flex: 1 0 auto"

Example: 

<body>
  <div class="mdl-layout mdl-js-layout">
    <header class="mdl-layout__header">
      ...
    </header>
    <main class="mdl-layout__content" style="flex: 1 0 auto;">
      ...
    </main>
    <footer class="mdl-mega-footer">
      ...
    </footer>
  </div>
</body>

2. With waterfall header

  1. Just by moving the footer element outside the main element

Example: 

  <body>
    <div class="site mdl-layout mdl-js-layout">           
      <header class="mdl-layout__header mdl-layout__header--waterfall">
          <div class="mdl-layout__header-row">
              <!-- Header Content Here -->
          </div>
      </header>
      <div class="mdl-layout__drawer">
          <!-- Drawer Content -->
      </div>
      <main class="mdl-layout__content">
          <!-- Main Content -->
      </main>
      <footer class="mdl-mini-footer">
          <!-- Footer Content -->
      </footer>
    </div>
  </body>

Tests:

Related questions

Centered form with material design lite

I am looking for an easy to get a login form centered on the screen using Google's Material Design Lite library. I've been through a number of iterations and this is the best I've come up with: <div class="…

Read More
What is the correct way to make a Material Design Lite table 100% width?

I'm looking into using Google's Material Design Lite framework and I'm wondering how I can make a table span a 100% width of it's containing element: Take this table: <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp"> <thead> &…

Read More
How to align Material Design Lite cards to right hand side

I'm trying to build a simple page which have cards using material design lite components but one problem stucks the whole layout of the page. How to align the mdl card to right hand side of the screen ? I have …

Read More