Material Design Lite 和 Bootstrap 粘性页脚

Question

我正在构建一个使用 Bootstrap Sticky Footer and Navbar. However, with Google's recent release of the Material Design Lite 库的站点，我想在我的站点的一部分中使用这些卡片。但是，一旦我包含 MDL 库（只有 CSS，没有其他更改），我的粘性页脚就会出现一些奇怪的事情。页脚设置在视口的底部（无论 window 的高度如何）但它只是停留在那里。如果我向上滚动，它也会向上滚动。

当我实际检查页脚、正文等时，我没有发现任何影响 material 设计 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

这应该可以解决您的问题。参见 plunker

html {
  height: auto;
}

Answer 2

即使新标签页的内容高度不同，我也找到了保持页脚固定在底部的正确解决方案。

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>

Material Design Lite 和 Bootstrap 粘性页脚

Material Design Lite and Bootstrap Sticky Footer

css

twitter-bootstrap-3

material-design-lite