Question

我正在构建一个使用Bootstrap Sticky Footer and Navbar的网站。但是，在Google最近发布的Material Design Lite库中，我想将这些卡用于我网站的一部分。但是，只要我包含MDL库（只是CSS，没有其他更改），我的粘性页脚会做一些奇怪的事情。页脚设置在视口的底部（无论窗口的高度），但它只是粘在那里。如果我向上滚动，它也会向上滚动。

当我实际检查页脚，主体等时，我看不到任何影响布料的材料设计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

这个小提琴特别具有有用的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>

Answer 2

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

html {
  height: auto;
}

Material Design Lite和Bootstrap Sticky Footer

2 个答案: