フッターは多くのサイトのナビゲーションや情報をページ末尾に整理するのに役立ちます。現在のページのスクロールを終了したユーザーや、Web サイトに関する追加情報を探しているユーザーは、ここを確認します。
はじめに
注: flexbox を使用して html を構造化するため、フッターは常にページの下部にあります。ページの構造は 3 つの HTML5 タグ内 (<header>、<main>、<footer>) に保持するのが重要です。
<footer class="page-footer">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Footer Content</h5>
<p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
</div>
<div class="col l4 offset-l2 s12">
<h5 class="white-text">Links</h5>
<ul>
<li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2014 Copyright Text
<a class="grey-text text-lighten-4 right" href="#!">More Links</a>
</div>
</div>
</footer>
固定フッター
固定フッターは、ページのコンテンツが少ない場合でも常にページの下部に表示されます。ただし、コンテンツが多い場合はこのフッターが下に押されるため、固定フッターとは異なります。CSS ファイルに次のコードを追加します。
注: これにより flexbox のサポートが弱い Internet Explorer で問題が発生する場合があります。
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}