2

Bootstrap Sticky Footer と Navbarを使用するサイトを構築しています。しかし、Google がマテリアル デザイン ライトライブラリを最近リリースしたので、サイトの一部にカードを使用したいと考えています。しかし、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 フィドルには、特に便利な 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

これで問題が解決するはずです。プランカーを見る

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