css - Material Design Lite 和 Bootstrap 粘性页脚

Question

我正在构建一个使用 Bootstrap Sticky Footer and Navbar 的网站。然而，随着 Google 最近发布了 Material Design Lite图书馆，我想将这些卡片用于我网站的一部分。然而，一旦我包含 MDL 库(只是 CSS，没有其他更改)，我的粘性页脚就会出现一些奇怪的情况。页脚设置为视口(viewport)的底部(无论该窗口的高度如何)，但它只是粘在那里。如果我向上滚动，它也会向上滚动。

当我实际检查页脚、正文等时，我发现没有任何东西会影响 Material Design CSS 的布局。显然有些东西是存在的，但我相当坚持它可能是什么。 (要查看它的工作原理，请删除对material-lite.css的引用。目前它在代码片段中已损坏。)

html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px;
  padding-bottom: 20px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  color: white;
  background-color: black;
}
#footer-content {
  margin: 20px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.css" />
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a asp-controller="Home" asp-action="Index" class="navbar-brand">
        <i class="fa fa-globe fa-lg visible-sm visible-xs"></i>
        <i class="fa fa-globe fa-3x hidden-sm hidden-xs"></i>
      </a>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav main-links">
        <li><a asp-controller="Home" asp-action="Index">Home</a>
        </li>
        <li><a asp-controller="Home" asp-action="About">About</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<div class="container">
  <img src="http://placekitten.com/300/450" />
  <br/>
  <img src="http://placekitten.com/300/450" />
  <br/>
</div>

<footer>
  <div class="container">
    <div id="footer-content" class="pull-right">
      My Footer
    </div>
  </div>
</footer>

Answer 1

我找到了正确的解决方案，即使新选项卡的内容具有不同的高度，也可以将页脚保持在底部。

https://github.com/google/material-design-lite/issues/913

这个 js fiddle 特别有有用的 html 和 css。

http://jsfiddle.net/eggbox/gk7u32b6/

简而言之，将其添加到页脚上方的 html 中

<style>
  .mdl-layout__content {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
 }

 .mdl-layout__content > *:not(.mdl-layout-spacer) {
 -webkit-flex: none;
 -ms-flex: none;
 flex: none;
 }
</style>

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

<footer class="mdl-mini-footer">
  <div class="mdl-mini-footer--middle-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>