web-dev-qa-db-ja.com

Google MDLを使用してページの下部にフッターを保持する

私が知る限り、このトピックに関する他の質問とは少し異なるため、これは重複した質問ではありません。

Googleのマテリアルデザインライトを使用していますが、フッターがページの下部に正しく表示されません。

私はこのトリックを使用したさまざまな修正を見てきました

<div class="content">
    <div class="header"></div>
    <div class="body"></div>
    <div class="footer"></div>
</div>

そして私はこの方法を試してみました

#footer {
   bottom: 0;
   width: 100%;
   position: absolute; (or fixed)
}

Material Design Liteは実際にはフッタータグを使用するため、最初のオプションは機能しません。正直に言って、私はとにかくそれをしたくありません。

フッターのCSSメソッドはほとんど機能しますが、いくつかの問題があります。 position: absolute;を使用すると、ページの下部にフッターが常に表示されるとは限らず、コンテンツがカバーされることもあります。 fixedを試してみると、フッターは常にページの下部に表示されますが、ページをスクロールするのに十分なコンテンツがある場合は、画面の下部にとどまってコンテンツを覆います。 fixedとabsoluteはどちらも、ページではなく画面の下部にフッターを保持します。つまり、フッターをスクロールするのに十分なコンテンツがあると、画面の端のコンテンツがカバーされます。

fixedの振る舞いは100％再現できますが、absoluteの場合、それがときどき動作する原因を理解できず、他のユーザーには機能しません。

これはフッター用のコードです

<footer class="mdl-mini-footer">
    <div class="mdl-mini-footer--left-section">
        <button class="mdl-mini-footer--social-btn social-btn social-btn__Twitter">
            <span class="visuallyhidden">Twitter</span>
         </button>
         <button class="mdl-mini-footer--social-btn social-btn social-btn__blogger">
            <span class="visuallyhidden">Facebook</span>
         </button>
         <button class="mdl-mini-footer--social-btn social-btn social-btn__gplus">
             <span class="visuallyhidden">Google Plus</span>
         </button>
     </div>
     <div class="mdl-mini-footer--right-section">
         <button class="mdl-mini-footer--social-btn social-btn__share">
             <i class="material-icons" role="presentation">share</i>
             <span class="visuallyhidden">share</span>
         </button>
     </div>
</footer>`

他の誰かがこの問題を抱えていたり、解決策についてアイデアを持っていますか？

編集して情報を追加します：

問題は、bodyやhtmlの高さではなく、どちらも100％です。

完全なレイアウトコード

<body>
  <div class="site mdl-layout mdl-js-layout">           
    <header class="mdl-layout__header mdl-layout__header--waterfall">
        <div class="mdl-layout__header-row">
            <!-- Header Content Here -->
        </div>
    </header>
    <div class="mdl-layout__drawer">
        <!-- Drawer Content -->
    </div>
    <main class="mdl-layout__content">
         <!-- View Content Here -->
    </main>
    <footer class="mdl-mini-footer">
        <!-- Footer Content -->
    </footer>
    <div class="mdl-layout__obfuscator"></div>
  </div>
</body>
htmlcssmaterial-design-lite
15
CJK

私はなんとかそれをすることができました：

1.ウォーターフォールヘッダーなし

  1. メイン要素の外にフッター要素を移動する
  2. .mdl-layout__content要素のスタイルを "flex：1 0 auto"に設定します

例：

<body>
  <div class="mdl-layout mdl-js-layout">
    <header class="mdl-layout__header">
      ...
    </header>
    <main class="mdl-layout__content" style="flex: 1 0 auto;">
      ...
    </main>
    <footer class="mdl-mega-footer">
      ...
    </footer>
  </div>
</body>

2.滝のヘッダーを使って

  1. メイン要素の外にフッター要素を移動するだけ

例：

  <body>
    <div class="site mdl-layout mdl-js-layout">           
      <header class="mdl-layout__header mdl-layout__header--waterfall">
          <div class="mdl-layout__header-row">
              <!-- Header Content Here -->
          </div>
      </header>
      <div class="mdl-layout__drawer">
          <!-- Drawer Content -->
      </div>
      <main class="mdl-layout__content">
          <!-- Main Content -->
      </main>
      <footer class="mdl-mini-footer">
          <!-- Footer Content -->
      </footer>
    </div>
  </body>

テスト：

33
K.A.D.

同じ問題が発生しましたが、mdl-mini-footerがmdl-layout__contentと重複していました。

私の解決策は、タグを分離しておくことでした。

<main class="mdl-layout__content">
  ...
</main>
<footer class="mdl-mini-footer">
  ...
</footer>

次のようにクラスを変更します（上記の@ K.A.Dの最初のソリューションからインスピレーションを得て）

.mdl-layout__content {
  flex: 1 0 auto;
}

.mdl-mini-footer {
  flex: 0 0 auto;
}

フッタークラスの変更は、フッターが不要なスペースに成長するのを防ぐために必要でした（0の最初の0 0 auto）。

4
mattsch

これを試して

    <main class="mdl-layout__content">
        <div class="page-content">

        </div>
        <div class="mdl-layout-spacer"></div>
        <footer class="mdl-mini-footer">
            <div class="mdl-mini-footer__left-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>
    </main>

追加するだけ：

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

後：

<div class="page-content"></div>
2
Grandong

私はあなたと同じ問題に直面しました。多くのチュートリアルとこのような2つの質問を閲覧した後、MDLによって提供されたテンプレートの1つをのぞいて、フッターがメインセクションに含まれていることに気付きました。直感に反しているようですが、フッター要素は終了タグの前ではなく、直前に指定する必要があります。現在正常に動作しているマークアップのスクリーンショットを参照してください。私はTEDx GECのWebサイトで作業しています。 tedx GEC Webサイトにアクセスしてフッターの動作を確認してください。（2016年7月20日までに変更がアップロードされます。それより前にアクセスした人は、フッターがcontent。 これがスクリーンショットです： メインの終了タグがフッターの後にあることに注意してください。

0
Saheel Wagh