使用Google MDL将页脚保持在页面底部

Question

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. 我正在使用Google的Material Design Lite，并且页脚不会正确地停留在页面底部。

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. 第一个选项不起作用，因为Material Design Lite实际上使用了页脚标记。 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. 页脚的CSS方法几乎可以工作但有一些问题。 When using position: absolute; 当使用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. 当我尝试fixed ，页脚始终保持在页面的底部，但是当页面有足够的内容滚动时，它会停留在屏幕的底部并覆盖内容。 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. fixed和absolute都会将页脚保持在屏幕的底部而不是页面，这意味着当有足够的内容滚动时，页脚会覆盖屏幕边缘的内容。

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. fixed的行为可以在100％的时间内重现，但是对于absolute我还没有弄清楚是什么原因导致它有时起作用而不是其他起作用。

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%. 问题不在于body的高度或html它们都是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 1

I managed to do that by: 我设法做到了：

1. Without waterfall header 1.没有瀑布头

Moving the footer element outside the main element 将页脚元素移动到主元素外部
Set the style of the .mdl-layout__content element to"flex: 1 0 auto" 将.mdl-layout__content元素的样式设置为“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 2.带瀑布头

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: 测试：

Short content: http://codepen.io/kabudahab/pen/vGdVQM 简短内容： http ： //codepen.io/kabudahab/pen/vGdVQM
Long content: http://codepen.io/kabudahab/pen/JXpmpv 内容长： http ： //codepen.io/kabudahab/pen/JXpmpv

Answer 2

I was having the same problem, where a mdl-mini-footer was overlapping with my mdl-layout__content . 我遇到了同样的问题，其中一个mdl-mini-footer与我的mdl-layout__content重叠。

My solution was to keep the tags separate, ie 我的解决方案是保持标签分离，即

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

and modify the classes as follows (taking inspiration from @KAD's first solution above) 并按如下方式修改类（从@KAD上面的第一个解决方案中获取灵感）

.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 ). 修改页脚类是必要的，以阻止页脚生长到我不想要的空间（ 0 0 auto的前0 ）。

Answer 3

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>

Answer 4

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. 在浏览了许多教程和2个这样的问题之后，我看了一下MDL提供的模板，并注意到页脚包含在主要部分中。 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. 我正在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. 访问tedx GEC网站以查看页脚的操作。（更改将在20-07-2016之前上传，之前访问的任何人都会注意到页脚与内容重叠。这是屏幕截图：请注意结束主标记位于页脚之后。

使用Google MDL将页脚保持在页面底部

问题描述

4 个解决方案

解决方案1
33 已采纳 2015-10-27 15:05:46

1. Without waterfall header 1.没有瀑布头

2. With waterfall header 2.带瀑布头

解决方案2
4 2017-05-24 11:18:27

解决方案3
2 2016-05-15 21:54:35

解决方案4
0 2016-07-18 17:57:11

使用Google MDL将页脚保持在页面底部

问题描述

4 个解决方案

解决方案1 33 已采纳 2015-10-27 15:05:46

1. Without waterfall header 1.没有瀑布头

2. With waterfall header 2.带瀑布头

解决方案2 4 2017-05-24 11:18:27

解决方案3 2 2016-05-15 21:54:35

解决方案4 0 2016-07-18 17:57:11

解决方案1
33 已采纳 2015-10-27 15:05:46

解决方案2
4 2017-05-24 11:18:27

解决方案3
2 2016-05-15 21:54:35

解决方案4
0 2016-07-18 17:57:11