2

我正在构建一个使用Bootstrap Sticky Footer 和 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>

4

2 回答 2

3

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

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>
于 2015-12-16T08:54:55.173 回答
1

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

html {
  height: auto;
}
于 2015-07-13T07:50:19.877 回答