页脚可以组织很多网站的导航信息在页面底部。用户通过页脚获取当前页面信息或者是网站以外的信息。
介绍
注意: 我们是使用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;
}