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。没有瀑布标题

将页脚元素移动到主元素之外
将.mdl-layout__content元素的样式设置为＆＃34; flex：1 0 auto＆＃34;

示例：

<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。使用瀑布标题

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

示例：

  <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

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

我的解决办法是将标签分开，即

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

并按如下方式修改课程（从@ K.A.D上面的第一个解决方案中获取灵感）

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

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

修改页脚类是必要的，以阻止页脚生长到我不想要的空间（0中的第一个0 0 auto）。

Answer 3

试试这个

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

我遇到了和你一样的问题。在浏览了许多教程和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.这是屏幕截图：Notice the closing main tag is after the footer.

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

4 个答案:

1。没有瀑布标题

2。使用瀑布标题