Question

页脚可以组织很多网站的导航信息在页面底部。用户通过页脚获取当前页面信息或者是网站以外的信息。

介绍

注意: 我们是使用 flexbox 结构来组织 html。 页脚总是在页面的底端。 这三个 HTML5 标签：<header>, <main>, <footer> 用来保证页面的结构是非常重要的。

<footer class="page-footer">
    <div class="container">
      <div class="row">
        <div class="col l6 s12">
          <h5 class="white-text">页脚内容</h5>
          <p class="grey-text text-lighten-4">你可以用行和列来组织你的页脚内容。</p>
        </div>
        <div class="col l4 offset-l2 s12">
          <h5 class="white-text">链接</h5>
          <ul>
            <li><a class="grey-text text-lighten-3" href="#!">链接 1</a></li>
            <li><a class="grey-text text-lighten-3" href="#!">链接 2</a></li>
            <li><a class="grey-text text-lighten-3" href="#!">链接 3</a></li>
            <li><a class="grey-text text-lighten-3" href="#!">链接 4</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="footer-copyright">
      <div class="container">
      © 2014 Copyright 文本
      <a class="grey-text text-lighten-4 right" href="#!">更多链接</a>
      </div>
    </div>
  </footer>

粘性页脚

一个粘性的页脚无论页面内容是多是少都始终位于页面底部。然而当页面内容超过屏幕时这个页脚会位于内容的下面。所以不同于固定的页脚。 增加下面的代码到你的 css 文件中就可以了。

注意：这可能会导致在 Internet Explorer 中的有 flexbox 弱支持的问题。

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }

  main {
    flex: 1 0 auto;
  }