页脚是组织大量网站导航和信息的绝佳方式，位于页面末尾。这是用户在滚动完当前页面或正在查找有关您网站的其他信息时会查看的位置。
简介
注意：我们使用 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;
}