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

Question

据我所知，这不是一个重复的问题，因为它与关于该主题的其他问题有点不同。

我使用的是 Google 的 Material Design Lite，页脚无法正确位于页面底部。

我已经看到使用此技巧的不同修复方法

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

我试过用这个方法

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

第一个选项不起作用，因为 Material Design Lite 实际上使用了页脚标记。老实说，我真的不想这样做，因为我觉得这有点草率。

页脚的 CSS 方法几乎可以工作，但存在一些问题。使用 position: absolute; 时，页脚并不总是位于页面底部，有时会覆盖内容。当我尝试 fixed 时，页脚始终保持在页面底部，但当页面有足够的内容滚动时，它会停留在屏幕底部并覆盖内容。 fixed 和 absolute 都会将页脚保持在屏幕底部而不是页面，这意味着当有足够的内容滚动时，页脚会覆盖屏幕边缘的内容。

fixed 的行为可以 100% 重现，但对于 absolute，我还没有弄清楚是什么原因导致它有时起作用，而其他时候不起作用。

这是我的页脚代码

<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>`

有没有其他人遇到过这个问题或对解决方案有任何想法？

编辑以添加更多信息：

问题不在于 body 或 html 的高度，它们都为 100%。

完整布局代码

<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

我通过以下方式做到了：

1。没有瀑布 header

将页脚元素移到主元素之外
将.mdl-layout__content元素的样式设置为"flex: 1 0 auto"

示例：

<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。有瀑布header

只需将页脚元素移到主元素之外

示例：

  <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>

测试：

短内容：http://codepen.io/kabudahab/pen/vGdVQM
长内容：http://codepen.io/kabudahab/pen/JXpmpv

Answer 2

试试这个

    <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>

只需添加：

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

之后：

<div class="page-content"></div>

Answer 3

我遇到了和你一样的问题。在浏览了许多教程和 2 个这样的问题之后，我瞥了一眼 MDL 提供的模板之一，注意到页脚包含在主要部分中。我发现它非常违反直觉，但应该在结束标记之前指定页脚元素，而不是在它之后。查看现在工作正常的标记的屏幕截图。我正在 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.

Answer 4

我遇到了同样的问题，mdl-mini-footer 与我的 mdl-layout__content 重叠。

我的解决方案是将标签分开，即

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

并修改 classes 如下（从上面@K.A.D 的第一个解决方案中获得灵感）

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

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

必须修改页脚 class 以阻止页脚增长到我不希望的空间（0 0 auto 中的第一个 0）。

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

Keeping footer at the bottom of the page using Google MDL

html

css

material-design-lite

1。没有瀑布 header

2。有瀑布header