15

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>
CJK
  • 952
  • 2
  • 10
  • 22
  • 1
    Have you tried the css table approach? similarly to this http://stackoverflow.com/a/28844062/483779 – Stickers Oct 05 '15 at 17:40
  • No but I explained why in my question. I actually need to use the footer tag so that isn't an option. – CJK Oct 05 '15 at 17:43
  • Never used the framework before, but the layout part can be out of the scope I guess. The css table solution works well with unknown height footer, position absolute or fixed will work too, but requires known height footer, you'll just need to add the extra padding or margin to avoid the overlapping. – Stickers Oct 05 '15 at 17:48
  • Have you found a solution that doesn't keep the footer visible all the time at the bottom of the window? For now I'm using a different layout: to fill the remaining space below the footer with the same color of the footer. – Ferran Maylinch Apr 14 '16 at 21:13

4 Answers4

34

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:

K.A.D.
  • 3,648
  • 3
  • 34
  • 35
  • 1
    One issue was that the waterfall header doesn't stick to the top of the screen after adding the flex style to the mdl-layout__content tag but this does keep the footer to the bottom of the page so it's a good start. – CJK Oct 28 '15 at 02:16
  • I am using the same styles for my page and I have no problem with the header. Which MDL template are you using? – K.A.D. Oct 29 '15 at 08:39
  • Code added. Let me know if you see any problems – CJK Oct 30 '15 at 22:31
  • @CJK: cannot you apply position fixed to header directly? – K.A.D. Apr 01 '16 at 23:31
  • @CJK: thanks for unaccepting the answer, in your case, you do not need to add `style="flex: 1 0 auto;"` as you are using waterfall header. See the following example: http://codepen.io/kabudahab/pen/JXpmpv – K.A.D. Apr 12 '16 at 08:42
  • Thanks I'll try that – CJK Apr 12 '16 at 20:48
  • 5
    This solution keeps the footer visible all the time. How can it be displayed (at the bottom) only when the content is short? Is the CSS table hack the only option? – Ferran Maylinch Apr 14 '16 at 21:05
6

I was having the same problem, where a mdl-mini-footer was overlapping with my mdl-layout__content.

My solution was to keep the tags separate, i.e.

<main class="mdl-layout__content">
  ...
</main>
<footer class="mdl-mini-footer">
  ...
</footer>

and modify the classes as follows (taking inspiration from @K.A.D's first solution above)

.mdl-layout__content {
  flex: 1 0 auto;
}

.mdl-mini-footer {
  flex: 0 0 auto;
}

The modification of the footer class was necessary to stop the footer growing into spaces I didn't want it to (the first 0 in 0 0 auto).

mattsch
  • 1,454
  • 1
  • 14
  • 18
2

Try This

    <main class="mdl-layout__content">
        <div class="page-content">

        </div>
        <div class="mdl-layout-spacer"></div>
        <footer class="mdl-mini-footer">
            <div class="mdl-mini-footer__left-section">
                <div class="mdl-logo">Title</div>
                <ul class="mdl-mini-footer__link-list">
                    <li><a href="#">Help</a></li>
                    <li><a href="#">Privacy & Terms</a></li>
                </ul>
            </div>
        </footer>
    </main>

Just Add:

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

After:

<div class="page-content"></div>
Grandong
  • 101
  • 1
  • 4
0

I faced the same issue as you. After browsing through many tutorials and 2 questions like this, I had a peek at one of the templates provided by MDL and noticed that the footer is included within the main section. I find it higly counter-intuitive but the footer element should be specified just before the closing tag, NOT after it. See the screenshot of the markup which is now working fine. I'm working on the website of TEDx GEC.Visit the tedx GEC website to see the footer in action.(changes will be uploaded by 20-07-2016, anyone visiting before that will notice that the footer overlaps the content. Here's the screenshot:Notice the closing main tag is after the footer.

Saheel Wagh
  • 1