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

据我所知,这不是一个重复的问题,因为它与其他问题有所不同.

我正在使用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;它并不总是将页脚保持在页面底部,有时会覆盖内容.当我尝试固定页脚总是保持在页面的底部,但是当页面有足够的内容滚动它保持在屏幕的底部,并涵盖内容.固定和绝对都将页脚保持在屏幕的底部,而不是页面,这意味着当内容足够的内容可以滚动页脚覆盖屏幕边缘的内容.

固定的行为可以在100％的时间内复制,但绝对的,我还没有弄清楚什么原因是有时候而不是别的.

这是我对页脚的代码

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

有没有人有这个问题或有任何想法解决方案？

编辑以添加更多信息：

问题不在于身体的高度或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>

解决方法

我设法做到：

没有瀑布头

>将页脚元素移到主要元素之外
>将.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>

用瀑布头

>只需将页脚元素移到主元件外

例：

<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

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

解决方法

相关推荐