Materialize - How to align the footer always below?

Asked

Viewed 743 times

3

This code below leaves it aligned below if the content fills the whole page, otherwise it gets in the middle of the body.

Remark: I have read the manual of materialize, it was even aligned but mischaracterized the side menu.

I’ve also tried style='vertical-align=bottom;' unsuccessful. 

<!-- INÍCIO DO RODAPÉ -->
  <footer class="page-footer">
    <div class="footer-copyright">
      <div class="container">
      </div>
    </div>
  </footer>
  <!-- FIM DO RODAPÉ -->

css materialize

2 answers

1

What you can do is create a class in your CSS by placing the following code:

position: absolute;
bottom: 0;

1

friend tries so in your CSS file

   

 /*No seu body*/

   html, body {
    	height: 100%;
    	}
      
    /*Na primeira div do seu html */

    #NomeDaSuaPrimeiraDiv {
    	min-height: 100%;
    	}
      
    * html #NomeDaSuaPrimeiraDiv {
    	height: 100%; 
    	}
      
      /*Posicionando o rodapé*/
    #NomeDaSuaPrimeiraDiv {
    	position: relative;
    	}

    #page-footer {
    	position: absolute;
    	bottom: 0;
    	}

I hope this helps you if it doesn’t work access this link http://www.maujor.com/tutorial/rodape-embaixo-da-janela.php here is explaining how to position your footer may have been a little confused my explanation so access this link I put on this site explains better

Browser other questions tagged css materialize

You are not signed in. Login or sign up in order to post.