Footers are a great way to organize a lot of site navigation and information at the end of a page. This is where the user will look once they have finished scrolling through the current page or are looking for additional information about your website.
Note: We use flexbox to structure our html so that the footer is
always on the bottom of the page. It is important to keep the
structure of your page within the 3 HTML5 tags:
<header>,
<main>,
<footer>
Copied!
content_copy
<footer class="page-footer">
<div class="container">
<div class="row">
<div class="l6 s12">
<h5>Footer Content</h5>
<p>You can use rows and columns here to organize your footer content.</p>
</div>
<div class="l4 offset-l8 s12">
<h5>Links</h5>
<ul>
<li><a href="#!">Link 1</a></li>
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2014 Copyright Text
<a class="right" href="#!">More Links</a>
</div>
</div>
</footer>
A sticky footer always stays on the bottom of the page regardless of how little content is on the page. However, this footer will be pushed down if there is a lot of content, so it is different from a fixed footer. Add the following code to your CSS file.
Note: This may cause issues in Internet Explorer which has weak support for flexbox.
Copied!
content_copy
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}