I want a materialize footer which is always in view irrespective of amount of content.

Question

The body should be scrollable but the footer should be fixed.

    <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>

I Used this , but the footer stays at the bottom and i can only see it after scrolling through the whole body. I want the footer to be always visible.

Answer 1

Assuming you want a "sticky footer", which means for a limited amount of content (with no scrolling), the footer will show, you can follow the link Dave Hearne has posted.

I believe your problem is different, you want the footer to show regardless of how much content is available. Here is a solution: (Please add this to your css file)

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

main {
 flex: 1;
}

footer{
position: fixed;
right: 0;
left: 0;
bottom: 0;
}